flex的含义和好处：1

Question

我flex: 1今天偶然发现了一些代码，并在谷歌上搜索以获取有关其功能的一些信息。w3schools简洁地指出：

无论其内容如何，​​让所有灵活项目的长度相同。

但正如我所见，它用于其他情况，例如故意将兄弟元素向下推到底部，有没有人知道列出有用的情况flex: 1？

Answer 1

CSS border,padding和marginproperties 都是速记属性。这意味着他们将多个属性合并为一个。

CSSflex属性也不例外。这只是一种巩固的速记方式：

• flex-grow
• flex-shrink
• flex-basis

因此，使用该flex属性的原因与使用任何其他 CSS 速记属性的原因相同：

• 最小化你的代码
• 重置/更改默认值

就功能而言，该flex物业没有任何独特之处。flex属性可以做的任何事情，也可以使用普通属性的组合来完成。

例如：

flex: 2 1 250px

完全相同：

• flex-grow: 2
• flex-shrink: 1
• flex-basis: 250px

然后 flexbox 规范将“速记”更进一步，定义了一个更短的速记：

flex: <positive-number>

相当于flex: <positive-number> 1 0。

使 flex 项目灵活并将 flex 基础设置为零。

^{http://www.w3.org/TR/css-flexbox-1/#flex-common}

以下是常用的flex速记规则列表：

• https://www.w3.org/TR/css-flexbox-1/#flex-common

该规范还提出了以下建议：

鼓励作者使用flex速记而不是直接使用其速记属性来控制灵活性，因为速记会正确重置任何未指定的组件以适应常见用途。

^{http://www.w3.org/TR/css-flexbox-1/#flex-components}

这是一个相关的帖子，提供更多信息：

• 了解 flex 属性