flex-direction
flex-direction的作用是设置元素在主轴上的排列方向。
取值为：
row :x轴左对齐排列
row-reverse: x轴右对齐倒序排列
column：y轴顶对齐排列
column-reverse:y轴第对齐倒序排列
实例: row
.panel{
display: flex;display: -webkit-flex; width:500px; height: 80px;
background: #FFFFCC;
}
.panel .item{
flex-direction:row;
}
flex-direction-row.png
实例: row-reverse
.panel{
display: flex;display: -webkit-flex; width:500px; height: 80px;
background: #FFFFCC;
}
.panel .item{
flex-direction:row-reverse;
}
flex-direction-row-reverse.png
实例: column
.panel{
display: flex;display: -webkit-flex; width:500px; height: 80px;
background: #FFFFCC;
}
.panel .item{
flex-direction:column;
}
column.png
实例: column-reverse
.panel{
display: flex;display: -webkit-flex; width:500px; height: 80px;
background: #FFFFCC;
}
.panel .item{
flex-direction:column-reverse;
}
column-reverse.png
上一篇：【连载】flex布局[概述 之 1]
下一篇：【连载】flex布局[flex-wrap 之 3]
