2021-07-12

熟练运用flex-grow 与flex-shrink

截屏2021-07-13 上午9.02.18.png

flex-grow:定义项目的的放大比例

    默认为0,即 即使存在剩余空间,也不会放大;
   所有项目的flex-grow为1:等分剩余空间(自动放大占位);
   flex-grow为n的项目,占据的空间(放大的比例)是flex-grow为1的n倍。

flex-shrink:定义项目的缩小比例

    默认为1,即 如果空间不足,该项目将缩小;
     所有项目的flex-shrink为1:当空间不足时,缩小的比例相同;
     flex-shrink为0:空间不足时,该项目不会缩小;
     flex-shrink为n的项目,空间不足时缩小的比例是flex-shrink为1的n倍。

代码如下:

    




你可能感兴趣的:(2021-07-12)