css - 这个 flex 样式用简单的英语做什么？

Question

我需要帮助以简单的英语理解flex: 0 0 673px我的元素在做什么。

我已阅读 CSS Trick 文档和其他 MDN 资源，但没有帮助。

标签： cssflexbox

Answer 1

来自MDN：

flex可以使用一个、两个或三个值指定该属性。

[...]

三值语法：

• 第一个值必须是无单位的<number>，它被解释为<flex-grow>.
• 第二个值必须是无单位的<number>，它被解释为<flex-shrink>。
• 第三个值必须是 的有效值width并且被解释为<flex-basis>。

由此，我们可以看出这flex: 0 0 673px;是简写，但它并不能真正告诉我们每个值的含义。这是普通的等价物：

flex-grow: 0;
flex-shrink: 0;
flex-basis: 673px;

因此，让我们依次看看这些属性中的每一个。让我们从 开始flex-basis，因为它的名称中包含“基础”，并且听起来是一个不错的起点。

flex-basis：

CSS 属性设置弹性项目的flex-basis初始主尺寸。它设置内容框的大小，除非另有设置box-sizing。

计算弹性布局是一个包含多个阶段的过程。忽略 about 部分box-sizing，该属性告诉布局引擎通过将每个元素在 flex 方向上设置为这个大小来开始。它还有一些其他的特殊值（详见 MDN），但这是它的要点。

flex-grow：

CSS 属性设置弹性容器中的flex-grow可用空间应该分配给该项目（弹性增长因子）。

如果 flex 容器大于其中每个元素的组合基本大小，则布局引擎将拉伸和/或展开元素以填充容器。该属性指定了一种比例因子；flex-grow设置为的元素2将拉伸两倍于设置为的元素1。值0告诉布局引擎永远不要拉伸这个元素。

flex-shrink：

CSS 属性设置弹性项目的flex-shrink弹性收缩系数。如果弹性项目的大小大于弹性容器，项目会根据flex-shrink.

所以我们知道如何填充更大的容器。但是如果容器太小怎么办？应用了相同的原则，只是这次使用了flex-shrink属性。请注意，使用0它可能会导致 flex 元素溢出其容器。