CSS3 Flex计算逻辑

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/woxueliuyun/article/details/51628681

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,表示默认使用元素内容的宽度。
展开阅读全文

没有更多推荐了,返回首页