我用这个选项 flex: 1 0 auto 告诉 flexbox 什么？

1、0 和汽车是什么意思？flex: 1 0 auto;

3个值分别是：flex-grow | 弹性收缩 | 弹性基础

<'flex-grow'>
定义flex-growflex 元素。有关<number>更多详细信息，请参阅。负值不被认为是有效的。省略时默认为 1。

flex-growCSS 属性指定 flex 元素的增长因子。指定元素应该在弹性容器中占据多少空间。

• 在您的情况下1，即大小与 1 成正比。

<'flex-shrink'>
定义flex-shrink弹性元素。有关<number>更多详细信息，请参阅。负值不被认为是有效的。省略时默认为 1。

flex-shrinkCSS 属性指定 flex 元素的 flex 收缩系数。

• 在您的情况下0，也就是说，它的收缩速度将比其兄弟姐妹快 0 倍。

<'flex-basis'>
定义flex-basisflex 元素。接受宽度和高度属性的任何有效值。首选大小 0 必须有一个单位以避免被解释为灵活。省略时默认为 0%。

flex-basisCSS 属性指定 flex 基数，它是 flex 元素的初始大小。此属性确定内容框的大小，除非使用box-sizing.

• 在您的情况下auto，即会自动计算其初始大小。

来源：flex - CSS | mdn

常见的弹性值：

弹性：0车；

这flex: initial;与默认值的简写相同：flex: 0 1 auto。元素的大小基于其宽度/高度（如果未设置，则为其内容）。

弹性：自动；

这相当于flex: 1 1 auto. 请注意，这不是默认值。它根据元素的宽度/高度调整元素的大小，但使其完全灵活，因此它吸收了沿主轴的任何额外空间。

弹性：无；

这相当于flex: 0 0 auto. 它根据元素的宽度/高度调整元素的大小，但使其完全不灵活。

字体

csscs3 _

根据w3c.org文档（官方网站），该属性flex允许容器为其元素分配可用空间（与其 flex 因子成比例grow）以填充容器，或缩小它们（与 flex 因子成比例shrink）以防止溢出。 （溢出）。

如您所见，文档flex以自己的定义告诉您容器中包含的元素的两个属性。但是，该属性flex可以采用以下值：

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

该属性的初始值为flex：

flex: 1 0 auto

该属性的每个可能值flex对应于：

• flex-grow: 这是生长因子。flex对应于一个数字，该数字确定如果有可用空间，则弹性项目相对于容器内的其余弹性项目将增长多少。当省略时，它相当于放置一个 1。

• flex-shrink：这个值指定了收缩因子，它决定了如果容器空间不足，弹性项目相对于容器内的其余弹性项目将收缩多少flex。当省略时，它相当于放置一个 1。

• flex-basis：这个值指定了一个弹性元素在自由空间根据弹性因子（flex-grow和flex-shrink）分配之前的初始值。省略时，其默认值为 0。

它可以取的值flex-basis有：

• auto: 当它取这个值时，它flex-basis取用作 的主要尺寸属性的值flex-basis。如果这个值是auto单独的，那么使用的值是content。

• content：表示根据弹性项目的内容自动调整大小。

• width：对于所有其他值，flex-basis它的解析方式与宽度和高度相同。

• none: 值 none 等价于0 0 auto。

最后，我留下一张图片，该图片也取自文档，其中区分了建立“绝对”弹性（以flex-basis0 开头）或“相对”弹性（以元素内容的大小为基础）。这三个元素的弹性系数分别为 1、1 和 2。请注意，弹性系数为 2 的元素增长了一倍。