css flex flex-wrap属性，子元素换行方式

css flex flex-wrap属性，子元素换行方式支持nowrap、wrap、wrap-reverse，默认nowrap不换行。

flex-wrap属性

nowrap例子

 <style> 
    .boxs
      {  
        width:60%;
        height:100px;
        border:1px solid #333;
        display:flex; 
        flex-wrap:nowrap;
      }
     .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>

例子

wrap例子

例子

wrap-reverse例子

例子