时间戳

首页 > 解决方案 > flex: 100% 如何在 CSS 中工作？

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

问题描述

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

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

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

这是一个 w3school 的示例，它通过在影响媒体查询后将flex: 50%​​和放置到子列来控制容器的布局。flex: 100%

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

我在这里错过了什么吗？是不是因为%那个原因才算在内flex-basis？

标签： cssflexboxspecifications

解决方案

如果您参考规范，您可以阅读：

价值：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'>

推荐阅读