在 flex shorthand 中省略 flex-grow 值

Question

在这个资源中：https://www.w3.org/TR/css-flexbox-1/#propdef-flex它说，当使用flex shorthand时，如果你省略flex-grow，它被设置为1。但是怎么能你一开始就忽略了它？

Answer 1

只需写成flex: 1。这是 shorthand 写作：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

所以flex-grow默认设置为1。

如果您手动指定如下内容：

flex: 1;
flex-shrink: 0;

那么flex-shrink就是0，flex-grow还是1.

此外，请注意，您需要 parent 上的 display: flex 才能使用 flex 与！

希望对您有所帮助！ :)

Answer 2

在您引用的同一个 flex property definition 中，它还表示：

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

双横线(||)分隔两个或多个选项，必须指定一个或多个(source)。

这意味着 flex-grow 属性可以通过这样写来省略：

flex: auto

或

flex: 250px

或

flex: 33%

以上所有指定 flex-basis 组件。

（省略）flex-shrink 默认为 1，如规范中所定义。

（省略）flex-grow 默认为 1，如规范中所定义。

仅供参考，值语法中的问号 (?) 表示前面的属性是可选的。这意味着当浏览器看到这样的东西时：flex: 2 15em，无单位数字将应用于 flex-grow，因为 flex-shrink 是可选的，默认为 1 (source)。

Omitting the flex-grow value in flex shorthand