语法
flex-direction: row | row-reverse | column | column-reverse
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
flex-direction示例：
flex-direction:row
- a
- b
- c
flex-direction:row-reverse
- a
- b
- c
flex-direction:column
- a
- b
- c
flex-direction:column-reverse
- a
- b
- c
http://caibaojian.com/demo/flexbox/flex-direction.html 借鉴