css flex shrink,CSS 弹性盒子 flex的三个属性：grow、shrink、basis

首先介绍flex-grow属性，flex-grow会在容器太大时对元素作出调解。

如果图片A的flex-grow属性的值为 1，，图片B的flex-grow为 2，那么 2 的会比 1 的扩大两倍：

也许“扩大两倍”这个观点未便于理解，我们可以换一种说法。

首先要理解一个词“残剩空间”：具备flex环境的父容器(display:flex;)默认有一条从左往右

的主轴，而残剩空间就是父容器在主轴标的目的上还有几多可用空间。例如此刻有一个父容器container宽度为500px，

而图A+图B为300px，则残剩空间为200px。此时，图片A的flex-grow属性的值为 1，图片B的flex-grow为 2，

则残剩空间200px将被分为1+2=3份，此中一份分给图片A，两份分给图片B，也就是上面所说的图片A比图片B多扩大两倍。

flex-shrink

默认情况下，flex是不换行的，即使内容的宽度赶过了父容器的宽度也不会，除非设置flex-wrap来换行。

flex-shrink属性。flex-grow会在容器太大时对元素作出调解。相应地，使用flex-shrink之后，

如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。

flex-shrink属性接受 number 类型的值。数值越大，与其他项目对比会被压缩得更厉害。例如，

如果图片A的flex-shrink为 1 ，图片B的flex-shrink为 2，那么 2 的阿谁与 1 对比会受到 2 倍压缩：

而实际的压缩率是几多呢？在实际内容宽度大于父容器的情况下，

残剩空间就自然地变为了负数，也就暂时不起感化。这里假设图片A 200px 图片B 200px，父容器300px。

设图片A B的压缩率是X1 X2，则有方程：

X2 = 2 * X1

300 = 200*X1 + 200*X2，求得压缩率。

(如果你不想让内容被压缩，则可设置flex-shrink为0)

flex-basis

flex-basis属性指定了项目在 CSS 进行flex-shrink或flex-grow调解前的初始巨细。成果上等价于width，但优先级比width高。

flex-basis属性的单位与其他 size 属性一致(px、em、%等)。如果值为auto，项目的巨细依赖于自身内容。

在这里，图片A的flex-basis为10em，图片B的flex-basis为20em：

flex 短要领

上面几个 flex 属性有一个简写方法。flex-grow、flex-shrink和flex-basis属性可以在flex中一同设置。

例如，图片A flex: 2 2 150px;会把项目属性设为flex-grow: 2;、flex-shrink: 2;以及flex-basis: 150px;

图片B flex: 1 1 150px;会把项目属性设为flex-grow: 1;、flex-shrink: 1;以及flex-basis: 150px;。

(flex 属性的默认设置是flex: 0 1 auto;)

当容器宽度小于150+150=300px时，会让图片A的缩小倍率为图片B的两倍(缩小得更快)：

当容器宽度大于300px时，会让图片A的填充倍率为图片B的两倍(扩增得更快)：

部分内容参考自：https://learn.freecodecamp.one/

CSS 弹性盒子 flex的三个属性：grow、shrink、basis