以flex速记省略flex-grow值

Question

在这个资源：https://www.w3.org/TR/css-flexbox-1/#propdef-flex它说，当使用flex速记，如果你省略flex-grow，它被设置为1.但你怎么能省略它？

Answer 1

在您引用的相同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）。

Answer 2

只需写flex: 1。这是写作的简写：

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

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

如果您手动指定类似的内容：

flex: 1;
flex-shrink: 0;

然后flex-shrink将是0，而flex-grow仍将是1。

此外，请注意，您需要在父母身上使用display: flex才能使用flex！

希望这可以帮助！ :)