css flex flex-direction属性,子元素在主轴的排列方向

css flex-direction属性,子元素在主轴的排列方向。

flex-direction属性

可选值
说明
row 主轴为水平方向,从左往右排列,默认row
row-reverse 主轴为水平方向,从右往左排列
column 主轴为垂直方向,从上往下排列
column-reverse 主轴为垂直方向,从下往上排列

row例子

<style> 
      .boxs
      {  
        width:60%;
        height:100px;
        border:1px solid #333;
        display:flex;
        flex-direction:row; 
      }
 </style>
<div class="boxs">
  <div style="background-color:#ffc5c5;" >子元素A</div>
  <div style="background-color:#7171f7;" >子元素B</div>  
  <div style="background-color:#c6d8c6;" >子元素C</div>
</div>

例子

row-reverse例子

例子

column例子

例子

column-reverse例子

例子