flex-grow,flex-basis 以及 flex-shrink

内容来自 YouTube 资源： https://www.youtube.com/watch?v=LVLmX-fx09w

flex-basis

初始值大小

Flex-basis 指定了 flex 元素在主轴方向上的初始大小，意味着主轴方向是横向时，指定了初始 width，主轴方向纵向时，则指定了初始 height 。

在主轴方向横向的时候，如果同时设置了flex-basis和 width,flex-basis 会覆盖 width值。对纵轴上的height也一样。也就是说flex-basis相比于width,height具有更高的优先级。

初始值大小并不是固定显示该长度，如父元素空间不足的时候，该长度可能会缩小，flex-basis 的显示效果受其他属性和父元素空间影响，比如 max-width。

默认值 auto

根据 MDN 上的示例，取值有如下几种：

/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 在flex item内容上的自动尺寸 */
flex-basis: content;

/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

Flex-basis 取值默认就是 auto，也就是取决于里面 content 的大小。content 基于 lfex 元素的内容自动调整大小（在一些早期浏览器中可能无效）。

min-width | max-width

在弹性方向上（横向对应 width，纵向对应 height），同时设置了 flex-basis 和 max/min 之后，max/min 具有更高的优先级。

max-width: 100px;
flex-basis: 200px;

元素大小不会超过 100px，尽管设置了 flex-basis。

flex-grow

flex-grow 决定了 flex 元素的主轴上的尺寸的增长，对 flex 容器中剩余空间的分配比例。( 剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小)

子元素尺寸 = 初始尺寸 + flex-grow 从剩余空间中分配的尺寸

flex 元素没有设置 flex-grow ，则默认 flex-grow 是 0，是不增长空间的（此时 flex-basis 生效）。

如果子元素没有占据满父元素，在给每个子元素都设置了相同的 flex-grow之后，每个子元素获得相同的额外增长。

如果 flex-grow 设置小数，比如 0.25，那么表示该元素会扩展 0.25 个剩余空间尺寸。下例：flex-grow:0.5，One 元素是 300 px 加上了 0.5 个剩余空间（父元素还有灰色剩余空间未分配）。

如下，one 和 two 元素的 flex-grow 都是 1，但是实际的大小是各自的 300px 和 100px 加上分配的剩余空间，他们分配到的剩余空间都是 50%（两元素的 flex-grow 是 1:1）。

如果只有一个元素设置了 flex-gow，且 flex-grow:1，那么会占据所有剩余空间，这个 1 就表示整个剩余空间。

设置三个元素的 flex-grow 都是 0.5 会怎样？

这个 0.5 并不能表示剩余空间的 50%了，因为三个加一起超过了 1（100%）。设置三个元素的 flex-grow 都是 0.5 的话会按照比例分配，将剩余空间三等分加到每个元素上。如下：

先看看不设置时候的原始大小：

一起设置 flex-grow:0.5.

剩余的灰色空间被三等分，然后加到了三个元素上，依然是 One 元素最大，Two 最小。

所以主要看子元素中 flex-grow 的累加和，超过 1 的时候是按照各个子元素的 flex-grow 值进行比例分配的，小于 1 的时候 flex-grow 就是对剩余空间分配的系数。

flex-shrink

flex-grow 决定了父元素存在剩余空间时，将剩余空间分配给子元素的方式。而如果没有剩余空间呢，子元素的大小超出了 flex 元素呢？

flex-shrink 表示超出大小时的缩小比例，默认值是 1，下面元素的 flex-basis 都是 400px，超出大小，但四个元素依然保持了大小一致，也就是 flex 元素都以相同的比例缩小了。

对第一个元素设置 flex-shrink: 3 之后，第一个元素是更小了，尺寸是其他元素的 1/3：

因为默认值是 1，上面已经是经过缩小了，那将他设为小数，则表示缩小的部分减小，那实际上是变大了。

shrink 的缩小计算会比 flex-grow 的复杂一些，会根据各个 flex-shrink 的值进行加权计算，算出每个元素的权重，再对溢出部分进行分配，得到每个子元素应该缩小多少尺寸。

而如果子元素的 flex-shrink 都设置小数，且小数和不超过 1 时，则只收缩溢出空间的一部分，flex-shrink 值就是溢出收缩的系数。

博客园文章，关于这部分的计算写挺细致： flex 布局中 flex-grow 与 flex-shrink 的计算方式