flex: 100% 在 css 中如何工作？

Question

正如 MDN 网络文档所述：“flex 属性是 shorthand 用于“flex-grow”、“flex-shrink”、“flex-basis”。

One-value syntax: the value must be one of:

a <number>: In this case it is interpreted as flex: <number> 1 0; the "flex-shrink" value is assumed to be 1 and the "flex-basis" value is assumed to be 0.

w3school 的

Here is an example 通过在影响媒体查询后将 flex: 50% 和 flex: 100% 放置到子列来控制容器的布局。

很明显这个100%不是给flex-growing用的，是当flex-basis用的。但这怎么可能呢？如果有单个值，则应假定为 flex-grow.

我是不是漏掉了什么？是因为 % 导致计入 flex-basis 吗？

Answer 1

如果你参考the Specification你可以阅读：

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

||表示：

A double bar (||) separates two or more options: one or more of them must occur, in any order.

如果您指定一个百分比值，它显然不是 <'flex-grow'> <'flex-shrink'>?，所以它是 <'flex-basis'>

如果你指定一个数字那么它不能是 <'flex-basis'> 因为它不接受 number 所以它将是 <'flex-grow'> <'flex-shrink'>? 而 ? 意味着：

A question mark (?) indicates that the preceding type, word, or group is optional (occurs zero or one times).

所以是 <'flex-grow'>

这里有更多组合：

flex: 1 1 --> <'flex-grow'> <'flex-shrink'>

flex: 1 50% 
  1   -->  <'flex-grow'> <'flex-shrink'>? --> <'flex-grow'>
  50% --> <'flex-basis'>

flex: 100% 在 css 中如何工作？

How flex: 100% works in css?

css

specifications

flexbox