flex-direction

flex-direction 规定内部元素是如何在flex容器中布局的，定义了主轴的方向。（是正向的或是相反的）。

语法

flex-direction:row | row-reverse | column | column-reverse

值

值描述
rowflex 容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。横向从左到右排列（左对齐），默认的排列方式。
row-reverse呈现和row相同，但是置换了主轴起点和主轴终点。反转横向排列（右对齐，从后往前排，最后一项排在最前面。
columnflex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同。纵向排列。
column-reverse呈现和column相同，但是置换了主轴起点和主轴终点。反转纵向排列，从后往前排，最后一项排在最上面。

例子

HTML 

<h4>flex-direction:row</h4>
<ul id="box" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>flex-direction:row-reverse</h4>
<ul id="box2" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>flex-direction:column</h4>
<ul id="box3" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>flex-direction:column-reverse</h4>
<ul id="box4" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

CSS 

.box{
  display:-webkit-flex;
  display:flex;
  margin:0;padding:10px;
  list-style:none;
  background-color:#333;
}
.box li{
  width:50px;
  height:50px;
  border:1px solid #aaa;
  text-align:center;
  color:#fff;}
#box{
  flex-direction:row;  //横向从左到右排列（左对齐），默认的排列方式。
}
#box2{
  flex-direction:row-reverse;  //反转横向排列（右对齐，从后往前排，最后一项排在最前面。
}
#box3{
  height:200px;
  flex-direction:column;  //纵向排列。 
}
#box4{
  height:200px;
  flex-direction:column-reverse;  //从后往前排，最后一项排在最上面。
}

执行结果

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

参考

外部链接


跳至内容顶部