我不明白是什么让弹性项目从增长行为转变为收缩行为？起初我以为是flex-basis 值，但如果只有一个项目有它，或者没有呢？
另外，flex-basis 上的规格说：
flex-basis CSS 属性指定 flex 基础，它是弹性项目的初始主尺寸。
这是什么意思？如果我有一个项目，其余的都是默认的，为什么它通常开始比值大一点？增加的空间从何而来？
【问题讨论】：
flex-basis 属性设置 flex 项的初始主尺寸，在其他 flex 属性分配可用空间之前。
这意味着弹性项目首先根据其定义的宽度（flex-direction: row）或高度（flex-direction: column）调整大小。
换句话说，在行方向的弹性容器中，flex-basis: 100px 等同于width: 100px，项目的宽度为 100 像素。
这是最初的主要尺寸。
然后，应用其他 flex 属性。即flex-grow和flex-shrink。
如果容器的宽度超过 100 像素，则 flex-grow: 1 会扩展项目以填充额外的空间。
如果容器小于 100px，则 flex-grow: 1 被忽略，flex-shrink: 1 根据 flex sizing algorithm 减小项目的大小。
所以，回答你的问题：
flex 什么时候从增长切换到收缩？
假设两个属性都启用（即，它们不是flex-grow: 0 或flex-shrink: 0），当弹性项目上flex-basis / width / height 的总和不再小于时，将发生切换或超过容器的长度。
为了更清楚一点：
当弹性项目上flex-basis / width / height 的总和不再更多超过容器的长度，这意味着没有溢出并且这些项目不会占用所有可用空间。 flex-grow 有效。
当弹性项目上flex-basis / width / height 的总和不再小于容器的长度，这意味着存在溢出并且物品必须缩小以适合容器内。 flex-shrink 有效。
来自规范：
flex-grow这个 [property] 指定了 flex 增长因子，它决定了 flex 项目相对于其余项目的增长量 当 positive free space 为 flex 容器中的 flex 项 分布式。
flex-shrink这个 [property] 指定了 flex 收缩因子，它决定了 flex 项相对于 flex 的其余部分将收缩多少 当 负可用空间 分配时，flex 容器中的项目。
flex-basis这个[属性]指定了弹性项目的初始主尺寸， 在根据弹性系数分配可用空间之前。
【讨论】：
flex-grow、flex-shrink 和 flex-basis 分别应用于每个项目，但前两个取决于容器的大小。
弹性项目不会从增长变为缩小。而是将参数视为设置最小、最大和灵活宽度的方法。使用flex-grow、flex-shrink 和flex-basis，您可以告诉您的元素应该如何操作。
flex-grow、flex-shrink 和 flex-basis 的默认值是 0 1 auto（通常在 flex 简写中定义：flex: 0 1 auto;）。这意味着，默认情况下，弹性容器不会填充任何剩余空间。它们的大小（大部分）由其中的内容决定。
将flex-grow 值设置为1 告诉元素填充容器行中的剩余空间。如果有兄弟元素，则平均划分该空间。将该值设置为大于 1 会告诉它使该元素相对大于所有其他项。 (Source: W3Schools.com)
flex-shrink 的默认值为 1，这意味着该元素将相对于其他元素缩小。不让它缩小，将值设置为0。这意味着一旦元素达到元素的最小宽度，它就不会进一步缩小。否则会继续相对缩小。
flex-basis 的默认值为auto，这意味着它将根据周围的其他元素自动确定宽度。引自 W3Schools.com，
项目的长度。合法值：“auto”、“inherit”或后跟“%”、“px”、“em”或任何其他长度单位的数字。 1
【讨论】：