以flex速记省略flex-grow值

Question

在此资源中：https://www.w3.org/TR/css-flexbox-1/#propdef-flex它表示，当使用flex简写时，如果省略flex-grow，则设置为1.但是如何在第一个中省略它放置？

Answer 1

只需撰写 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！

希望这有帮助！ ：）

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）。