【连载】flex布局[flex-direction 之 2]

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]