css flex 教程

css flex flex-flow属性为flex-direction属性和flex-wrap属性的简写形式

css flex flex-flow属性为flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

flex-flow 属性

flex-flow:row-reverse wrap-reverse;相当于flex-direction: row-reverse;flex-wrap:wrap-reverse;

<style> 
    .boxs
      {  
        width:60%;
        height:100px;
        border:1px solid #333;
        display:flex; 
        flex-flow:row-reverse wrap-reverse;
      }
     .boxs div
      {  
        width:30%;  
      }
 </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 style="background-color:#c9b0fb;" >子元素D</div>
</div>

例子

Catalog
css flex 教程 父元素属性 flex-direction 属性 flex-wrap 属性 flex-flow 属性 justify-content 属性 align-items 属性 align-content 属性 子元素属性 order 属性 flex-grow 属性 flex-shrink 属性 flex-basis 属性 flex 属性 align-self 属性 常见用例 左边固定右边自适应 右边固定左边自适应 两边固定中间自适应 上下固定中间自适应 css flex 1 省略号