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