效果—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
flex grow & shrink 演算法
总结
希望本篇文章能帮助大家进一步了解Flex属性是如何计算。最后借用一张清晰的图来做个总结吧。
参考链接：
[1]: www.w3cplus.com/css/flex-it…
