css弹性盒子：flex-grow、flex-shrink全规则详解

如果你开始学习flex-grow，相信大家都是从这样一个经典的例子开始的：

如果是flex-grow -attribute所有项目的数量 如果两者都为 1，则它们平分剩余空间（如果有）。如果一个项目的 flex-grow 属性为 2，其他项目为 1，则第一个项目将占用其他项目两倍的剩余空间。

当我看到这个通俗易懂的解释时，我立刻明白了：flex-grow 是按比例划分的，只有这个由 2 部分组成，其他都是 1 部分。当然，这需要比其他人多一倍的时间。明白了，弹性生长就是这么简单！

这种简单粗暴的认识并没有持续多久，因为我很快就遇到了这样的情况：

？ ？ ？为什么1份比2份占用空间多

看CSS代码，有一些区别：

1. .fix-base-object {
2. width: 100px ;flex-grow: 1;
3. }

此时注意回头看看，分配给元素的剩余空间为 。

剩余空间是父容器在轴上的可用空间量。在上面的例子中，flex-grow为元素2设置了一个宽度，它已经占用了一些主轴空间，除了它占用的部分之外，这是剩余的空间。 flex-grow 然后根据份额划分剩余空间。

将剩余空间按元素比例划分

看到这里我想我的理解就差不多了，就是这样，flex-g行就是这么简单！

有了这个认识，我已经使用Flex很长时间了，没有遇到任何问题。直到看到一种使用flex-direction: column + flex-grow: 0.5:

1. .container {
2. height: 40px;
3. flex-direction: column;
4. 背景进行垂直居中的方法: #ddd;
5. &: height: 30px;
6. background: #FFF;
7. }
8. }

经验表明，Flex Growth 为 0.5 的元素是唯一的一，这完全应该占用剩余空间。为什么它只占用了剩余空间的一半？ flex-grow: 0.5 到底是什么意思？很多文档只声明了flex-grow大于1时的情况，很少提及小于1时的情况。

其实flex-grow的整个规则应该是这样的。

flex-grow 不支持负值。默认值为0，表示不会占用剩余空间来扩展宽度。如果flex-grow大于0，则分配flex容器的剩余空间：

1. 如果只有一个flex元素设置了flex-grow属性值：
   a. flex-grow值为小于1，则将总剩余空间和这个比例的计算值赋给它。例如，0.5 的元素获得剩余空间的一半。
   B.如果 flex-grow 值大于 1，则所有剩余空间都是独占的。

1. 如果有多个flex元素设置了flex-grow属性值：
   a.如果flex-grow值之和小于1，则为该元素分配总剩余空间的比例以及当前元素的 flex-grow 设置。计算出来了。比如0.1的元素和0.2的元素只能分别分配剩余空间的1/10和2/10，剩下的剩余空间不会分配给他们。
   B.如果flex-grow值之和大于1，则使用所有剩余空间，分配比例为flex-grow属性值的比例。

这就是弹性增长机制的全部真相。了解了这些规则之后回头来看，flex-grow 确实非常简单。现在感觉终于可以大胆的在flex-grow上输入ez了，搞定，flex-grow就是这么简单！

附录：flex-shrink 的完整规则与 flex-grow 类似，只是尺寸减小了

1. 如果只有一个 flex 元素设置了 flex-shrink：
   a .shrink值小于1。那么收缩尺寸将不完整，部分内容会流过flex容器。
   B. flex-shrink 如果该值大于或等于 1，则收缩完成并且 Flex 容器被完全填充。

1. 如果多个flex元素都有一个flex shrink集：
   a. 如果flex shrink值之和小于1，则收缩尺寸不完整。每个元素的收缩尺寸与“完全收缩尺寸”的比例是设置flex shrink值。
   B.如果flex shrink值的总和大于1，则收缩完成，并且每个元素的收缩尺寸份额与flex shrink值的份额相同。