03-flex-wrap是否換行

 flex-wrap:運用到父元素上 結合 display: flex;
flex-wrap: wrap; 換行
flex-wrap: nowrap; 不換行

 #main { width: 300px; height: 300px; border: 1px solid #c3c3c3; display: flex; flex-wrap: nowrap; 默認不換行 } #main div { width: 100px; } </style>

<div id="main">
  <div style="background-color:coral;">11</div>
  <div style="background-color:lightblue;">22</div>
  <div style="background-color:pink;">33</div>
  <div style="background-color:olive;">4</div>
</div>