Flex响应式布局 ：元素必要时的换行以及让元素占满水平剩余的空间

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 学无止境