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

item的换行

默认情况下,item都排在一条轴线上: 使用 flex-wrap 可以使一条轴线排不下的情况下换行。

Item 1
Item 2

Flex响应式布局 :元素必要时的换行以及让元素占满水平剩余的空间_第1张图片

item占满剩余的水平空间

上面的item换行之后,item默认保持着原来的占屏大小,如果希望 item 占满剩余的空间 我们需要搭配 flex-shrink:0flex-grow:1 的使用

Item 1
Item 2

Flex响应式布局 :元素必要时的换行以及让元素占满水平剩余的空间_第2张图片


2020-11-13 学无止境

你可能感兴趣的:(前端,css,flexbox)