弹性盒子
flex-direction (适用于父类容器的元素上)
设置或检索伸缩盒对象的子元素在父容器中的位置。
语法
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 借鉴