05-项目属性flex-shrink
晴空闲云 582 2

本节目标

  1. 掌握flex-shrink的使用,同flex-grow类似。
  2. 掌握flex-shrink缩小的计算公式(难点)。

内容摘要

本篇介绍了 flex-shrink 属性,flow-grow 用于放大,那么 flex-shrink 就是缩小了,其缩小规则和 flex-grow 类似。

阅读时间约10~15分钟,文字虽多,但主要都是例子。

flex-shrink基础

上面一节学习了 flex-grow,如果理解了,那么这节的 flex-shrink 就简单了。

简单的说 flex-grow 用于放大,那么 flex-shrink 就是用于缩小了,两个属性就是反过来,计算方式都类似。

放大是因为有剩余空间,缩小就是因为项目的宽度超过容器了,有一个超出空间,所以就要进行缩小。

超出空间计算方式:

所有项目的总大小 减去 容器大小

参考如下示例: 05-项目属性flex-shrink 还记的 flex-basis 章节最后一个例子吗?

容器宽度为450px,三个项目各为200px,总宽超过容器了,就自动缩小了。不难计算,这里超出的空间就是 200px * 3 - 450px = 150px

语法格式:

.item {
    /* >=0 的数,默认值为 1 */
    flex-shrink: <number>; 
}

其中:

1. 默认值为1,表示所有项目等比例缩小。
2. 如果为0,那么表示不缩小。

缩小的尺寸计算方式和flew-grow类似,涉及到两个公式:

1)计算超出空间中多少用来压缩。

公式:超出空间 * ( 所有项目的flex-shrink之和 >= 1 ? 1 : 所有项目的flex-shrink之和 ) 。

如果没有超出空间,那么就用压缩了;如果超出空间为150px,所有项目的flex-shrink之和为0.6,那么90px用来压缩。

2)计算每个项目缩小多少空间。

公式:要压缩的空间 * ( 单个项目flex-shrink / 所有项目的flex-shrink之和 )

简单的说,就是按照 flex-shrink 占比进行缩小。

下面我们结合例子进行说明,对这边的计算公式进行理解。

示例1,设置项目的 flex-shrink 为0:

接上一篇例子,有一个div(容器,450px),容器内包含3个div(项目,flex-basis 为200px)。

.item {
    /* flex-basis属性定义了项目占据主轴空间(main size)大小。 */
    flex-basis: 200px;

    /* flex-shrink 属性定义项目的缩小系数 */
    flex-shrink: 0;
}

其中:

flex-shrink 为0表示不压缩项目。

运行效果: 05-项目属性flex-shrink 可以看到item3项目那边超出了容器一截。

示例2,接上例,设置项目1、2、3的 flex-shrink 分别为0、1、2:

套公式计算:

1)计算超出空间中多少用来压缩。

要压缩的空间
 = 总超出空间 * ( 所有项目的flex-shrink之和 >= 1 ? 1 : 所有项目的flex-shrink之和 ) 。
 = 150px * ( 3 >= 1 ? 1 : 3)
 = 150px

2)计算每个项目缩小多少空间。

项目1压缩的空间
 = 150px * ( 0 / 3 )
 = 0

项目2压缩的空间
 = 150px * ( 1 / 3 )
 = 50px

项目3压缩的空间
 = 150px * ( 2 / 3 )
 = 100px

所以最终:项目1宽为200px、项目2宽为150px、项目3宽为100px。

写上代码看看效果:

.item {
    /* flex-basis属性定义了项目占据主轴空间(main size)大小。 */
    flex-basis: 200px;
}

.item1 {
    flex-shrink: 0;
}

.item2 {
    flex-shrink: 1;
}

.item3 {
    flex-shrink: 2;
}

运行效果: 05-项目属性flex-shrink 观察运行效果,符合预期。

示例3:设置项目1、2、3的 flex-shrink 分别为 0.1、0.2、0.3:

这个示例和上例差不多,只是数字变成了小数,并且总和不大于1。

先套公式来计算一下:

1)计算超出空间中多少用来压缩。

要压缩的空间
 = 总超出空间 * ( 所有项目的flex-shrink之和 >= 1 ? 1 : 所有项目的flex-shrink之和 ) 。
 = 150px * ( 0.6 >= 1 ? 1 : 0.6)
 = 90px

2)计算每个项目缩小多少空间。

项目1压缩的空间
 = 90px * ( 0.1 / 0.6 )
 = 15px

项目2压缩的空间
 = 90px * ( 0.2 / 0.6 )
 = 30px

项目3压缩的空间
 = 90px * ( 0.3 / 0.6 )
 = 45px

所以最终:项目1宽为185x、项目2宽为170px、项目3宽为155px。

样式代码如下:

.item {
    /* flex-basis属性定义了项目占据主轴空间(main size)大小。 */
    flex-basis: 200px;
}

.item1 {
    flex-shrink: .1;
}

.item2 {
    flex-shrink: .2;
}

.item3 {
    flex-shrink: .3;
}

运行效果如下: 05-项目属性flex-shrink 符合计算预期。

本节总结

  1. 项目的总大小超出容器部分成为超出空间。

  2. flex-shrink用于设置项目的缩小系数。

  3. 项目缩小尺寸计算包含两个公式:

1)计算超出空间中多少用来压缩。

公式:总超出空间 * ( 所有项目的flex-shrink之和 >= 1 ? 1 : 所有项目的flex-shrink之和 ) 。

2)计算每个项目缩小多少空间。

公式:要压缩的空间 * ( 单个项目flex-shrink / 所有项目的flex-shrink之和 )
评论区

索引目录