关于前端:Flex响应式布局-元素必要时的换行以及让元素占满水平剩余的空间

107次阅读

共计 633 个字符，预计需要花费 2 分钟才能阅读完成。

默认状况下，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 占满残余的空间咱们须要搭配 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 学无止境

正文完