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