CSS3 Flex计算逻辑

Posted 2022-12-06 清箫

Flex样式

Flex: flex-grow | flex-shrink | flex-basis

• flex-grow：纯数字，表示增长因子。默认值为0，表示按元素的原大小显示。
• flex-shrink：纯数字，表示收缩因子。默认值是1，如果是0则按原始大小显示。当屏幕或容器变小时，不同元素的收缩比例可能与容器变大的逻辑是不一样的，所以会有这个属性。
• flex-basis：表示flex-item（flexbox容器内的子元素）的原始大小，如果没有这个属性，默认使用flex-item的内容大小。这个属性相当于flex-item的width属性。

Flex-grow计算逻辑-横向展开

以下计算步骤只适用于当横向展开时flexbox容器宽度大于所有子元素的宽度时：

1.  首先算出flexbox容器内所有子元素的原始宽度总和initial_space。

2.  用flexbox容器的总宽度减去initial_space，得到flexbox容器内剩余空间remained_space。

3.  获取flexbox容器中有flex-grow属性的子元素，算出flex-grow的总和grow_total。

4.  Flex-grow=0的元素默认按原大小显示。

5.  Flex-grow>0的元素，宽度=原宽度+ flexgrow/grow_tatal*remainded_space。

Flex-shrink计算逻辑-横向压缩

以下计算步骤只适用于当横向展开时flexbox容器宽度小于所有子元素的宽度时：

1.  首先算出flexbox容器内所有子元素的原始宽度总和initial_space。

2.  用initial_space减去flexbox容器的总宽度，得到超出flexbox容器的那部分空间over_space。

3.  获取flexbox容器中flex-shrink>0的子元素，算出flex-shrink * flex-basis的总和shrink_total。

4.  Flex-shrink=0的元素默认按原大小显示。

5.  Flex-shrink>0的元素，宽度=原宽度-(flexshrink*flexbasis)/shrink_total*over_space。

Flex-basis计算逻辑

• 如果子元素有flex-basis，就算作子元素的原始width（不包括边框和补边）。
• 如果子元素没有flex-basis，但有width属性，则使用width作为flex-basis。
• 如果flex-basis:content，表示默认使用元素内容的宽度。