[知其所以然]探究Flex盒子的‘’弹性‘’（下）

2022-05-06 87

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 我们使用Flexbox 实现垂直水平居中、自适应容器宽度乐此不疲，因为确确实实很方便。可以简便、完整、响应式地实现各种页面布局，目前已得到所有现代浏览器的支持。但Flex属性如何计算呢？

效果—3 fit-content

效果—4 fill-available

flex-basis属性相关的运用

flex-basis 默认值为auto

如果Flex项目显式的设置了width值，同时flex-basis为auto时，则Flex项目的宽度为按width来计算，如果未显式设置width，则按Flex项目的内容宽度来计算

如果Flex项目显式的设置了width值，同时显式设置了flex-basis的具体值，则Flex项目会忽略width值，会按flex-basis来计算Flex项目，当Flex容器剩余空间不足时，Flex项目的实际宽度并不会按flex-basis来计算，会根据flex-grow和flex-shrink设置的值给Flex项目分配相应的空间

如果Flex项目显式的设置了min-width或max-width值时，当flex-basis计算出来的值小于min-width则按min-width值设置Flex项目宽度，反之，计算出来的值大于max-width值时，则按max-width的值设置Flex项目宽度

flex-grow

当Flex容器有一定的剩余空间时，flex-grow可以让Flex项目分配Flex容器剩余的空间，每个Flex项目将根据flex-grow因子扩展，从而让Flex项目布满整个Flex容器（有效利用Flex容器的剩余空间）。当所有的Flex项目具有一个相同的flex-grow值时，那么Flex项目将会平均分配Flex容器剩余的空间。

flex-shrink

flex-shrink是用来控制Flex项目缩放因子。当所有Flex项目宽度之和大于Flex容器时，将会溢出容器（flex-wrap为nowrap时），flex-shrink就可以根据Flex项目设置的数值比例来分配Flex容器的不足空间，也就是按比例因子缩小自身的宽度，以免溢出Flex容器。

示例：

假设：一个宽度 837px 的 Flex 容器下有2 个 Flex项目，如图：

如何 grow ？

// Flex 项目1
  height: 100px;
  background-color: red;
  flex-grow: 5;
  flex-shrink: 5;
  flex-basis: 200px;

// Flex 项目2
  height: 100px;
  background-color: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;

grow 计算:

容器 宽度 837px - flex-basis[1] - flex-basis[2] > 0 即 有剩余空间
剩余空间 = 容器 宽度 837px - flex-basis[1] - flex-basis[2]  = 837px - 200px -200px = 437px
flex-grow 发挥作用如下：
flex-grow [1] * x + flex-grow[2] * x = 437px 
5x  +  1x = 437 
x= 72.83px 
所以 
Flex 项目1 的总宽度  =  flex-basis[1]  + flex-grow[1] * x  = 200px + 72.83px * 5  =  564.17px
Flex 项目2 的总宽度  =  flex-basis[2]  + flex-grow[2] * x  = 200px +  72.83px * 1 =  272.83px

如何 shrink ？

// Flex 项目1
  height: 100px;
  background-color: red;
  flex-grow: 5;
  flex-shrink: 5;
  flex-basis: 800px;

// Flex 项目2
  height: 100px;
  background-color: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 800px;

shrink 计算:

容器 宽度 837px - flex-basis[1] - flex-basis[2] < 0 即 有不足空间
不足空间 = 容器 宽度 837px - flex-basis[1] - flex-basis[2]  = 837px - 800px -800px = -763px
flex-shrink 发挥作用如下：
flex-shrink [1] * x + flex-shrink[2] * x = 763px 
5x  +  1x = 763px 
x = 127.17px
所以
Flex 项目1 的总宽度  =  flex-basis[1]  - flex-shrink[1] * x  = 800px - 127.17px * 5  =  164.17px
Flex 项目2 的总宽度  =  flex-basis[2]  + flex-shrink[2] * x  = 800px -  127.17px * 1 =  672.83px