item的換行

默認情況下，item都排在一條軸線上： 使用 flex-wrap 可以使一條軸線排不下的情況下換行。

<div style="display:flex; flex-wrap:wrap">
   <div style="background-color: yellow; min-width: 200px;height: 200px;">Item 1</div>
   <div style="background-color: red; min-width: 200px ; height: 200px;">Item 2</div>
</div>

item佔滿剩餘的水平空間

上面的item換行之後，item默認保持着原來的佔屏大小，如果希望 item 佔滿剩餘的空間 我們需要搭配 flex-shrink:0 和 flex-grow:1 的使用

<div style="display:flex; flex-wrap:wrap; justify-content:space-between">
   <div style="background-color: yellow; min-width: 200px;height: 200px;flex-shrink:0;flex-grow:1">Item 1</div>
   <div style="background-color: red; min-width: 200px ; height: 200px;flex-shrink:0;flex-grow:1">Item 2</div>
</div>

2020-11-13 學無止境