flex: 100% 如何在 CSS 中工作？答案

【问题标题】：How flex: 100% works in css?flex: 100% 如何在 CSS 中工作？
【发布时间】：2021-08-17 08:04:35
【问题描述】：

正如MDN 网络文档所说：“flex 属性是“flex-grow”、“flex-shrink”、“flex-basis”的简写。

单值语法：值必须是以下之一：

a <number>: 在这种情况下它被解释为 flex: <number> 1 0; “flex-shrink”值假定为 1，“flex-basis”值假定为 0。

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

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

我在这里遗漏了什么吗？是因为% 导致计入flex-basis 吗？

【问题讨论】：

【解决方案1】：

如果您参考the Specification，您可以阅读：

值：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

|| 表示：

双横线 (||) 分隔两个或多个选项：其中一个或多个必须出现，顺序不限。

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

如果您指定一个数字，则它不能是<'flex-basis'>，因为它不接受number，所以它将是<'flex-grow'> <'flex-shrink'>?，而? 表示：

问号 (?) 表示前面的类型、单词或组是可选的（出现零次或一次）。

所以是<'flex-grow'>

这里有更多组合：

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

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

【讨论】：