一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS3 flex-shrink属性用法详解

时间:2022-06-25 13:43:54 编辑:袖梨 来源:一聚教程网

flex-grow控制flex container有多余空间的时候怎么分配,默认值为0,即所有的flex items都不分配。
flex-shrink1则控制flex container空间不足以包含flex items时,flex items怎样缩小所占空间,来防止溢出container。其默认值为1,flex items们根据自身的flex-basis值做相应调整。

看一个示例:

 代码如下 复制代码

 
汇成一道道光的流河

 
我曾在天上见过地的繁华


CSS3 flex-shrink属性用法详解

在上面的代码中,flex container宽度为250px,而两个flex item宽度加起来有350px,所以要腾100px空间出来。
计算的方式是,每个flex item的flex-basis值乘以flex-shrink值求积,求和所有flex items的乘积,然后求占比,再乘以要腾出的空间。

 代码如下 复制代码
.example-first: (150 * 1) / ((200 * 1) + (150 * 1)) * 100 = 42.8571428571
.exampel-last: (200 * 1) / ((200 * 1) + (150 * 1)) * 100 = 57.1428571429

所以.example-first的宽度为150 – 42.8571428571 = 107px,.example-last的宽度为200 – 57.1428571429 = 143px。

热门栏目