css - 在 Flexbox 布局中，浏览器如何处理 flex 元素的宽度？

Question

我正在研究基于 Flexboxes 的 CSS3 布局。

我通常使用 flexboxes 的一部分功能来布局一些导航。

我的问题是当属性 flex 被应用到子元素时，浏览器如何处理元素的宽度。

注意事项:

现在是令人困惑的部分......

当我为 #child2 使用 flex-basis:300px 而不是使用 width:300px 时，同样的事情发生了...

原来是这样吗？

Answer 1

flex-wrap 属性

5.2 Flex Line Wrapping: the flex-wrap property

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

Value:      nowrap | wrap | wrap-reverse
Initial:    nowrap

可以看出，flex-wrap属性的初始值为nowrap，即means:

nowrap

The flex container is single-line. The cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.

话虽这么说，flex items 默认情况下将放在一行中，无论它们的宽度是多少； “即使那样会导致内容溢出。”

因此，使用的值应该是 wrap 以创建一个 multi-line flex 容器，它“跨多行打破它的 flex 元素”

---

浏览器如何处理 flex 元素的宽度

Flex 元素默认具有以下内容:

• 0 的 flex-grow
• 1 的 flex-shrink
• auto 的 flex-basis

这意味着:

• 它们不会在 flex 容器内生长；
• 它们会均匀收缩
• 它们将根据其内容调整大小。

EXAMPLE HERE

因此，如果您将 width¹ - 其值高于 flex 容器内的可用空间 - 给 flex 元素，它们会均匀收缩。

EXAMPLE HERE

如果你将 2 的 flex-shrink 给更大的，例如#child2，它会比另一个缩小两倍，例如#child1。

EXAMPLE HERE

---

flex属性的作用

flex是flex-grow、flex-shrink、flex-basis属性的简写；它接受 3 个值，其中第二个和第三个值是可选的。

语法

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

flex 的默认值是0 1 auto。但是，如果您使用单值语法 - 即 flex: 1; - 计算值将为 flex: 1 1 0%。

为了理解 auto 的 flex-basis 和 0 之间的区别，请看下面这张取自 Flexible Box Spec 的图片:

Figure 6. A diagram showing the difference between "absolute" flex (starting from a basis of zero) and "relative" flex (starting from a basis of the item’s content size). The three items have flex factors of 1, 1, and 2, respectively.

通过将 flex: 1² 给 #child2，由于 flex-basis : 0 它不再考虑 flex 元素内容的宽度。因此，#child2 的计算宽度将等于 flex 容器内的可用空间。

EXAMPLE HERE

此外，通过将 flex: 1² 赋给 #child 元素(以及#child2), flex 元素被强制均匀增长，不管它们是否有显式的 width ；无论它们的width值是多少³。

EXAMPLE HERE

---

最后但并非最不重要的一点!

为了有一个多行的 flex 容器，除了在容器上有flex-wrap: wrap，如果你给了flex-grow: 1 (即 flex: 1;)到一个 flex 元素，你必须给那个 flex-basis: 100% 以及(简而言之:flex: 1 100 %).

EXAMPLE HERE

---

^{1。等于 flex-basis 而不指定 flex-grow。}
<补充>2。等于 flex-grow: 1;, flex-shrink: 1; 和 flex-basis: 0 而 flex-shrink: 1; 默认应用。
<补充>3。而 flex-basis 会影响计算出的宽度。