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例子

例子