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