html - 与 flex-grow 一起使用的宽度属性的影响？

Question

请看下面的代码:

ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
  border: 1px solid;
  width: 1000px;
}

<header>
  <ul class="child">
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
  </ul>
</header>

注意 1000 像素的宽度。当我加载页面时，如我所料，有五行。如果我删除 width 属性，那么这些框会按预期显示在一行中。

现在，如果我添加 1 像素的宽度，那么唯一的变化是所有框的大小都相同，即 372.28 像素(不是 1 像素)。在我看来，行为如下:

1. 如果向 flex 元素添加了任何宽度，这意味着它们可以全部放在一行中，那么请确保所有框的大小相同。
2. 如果向 flex 元素添加了宽度，这意味着它们不能全部放在一行中，则遵循该宽度。
3. 如果未添加宽度，则框可以是任意大小，即在这种情况下，星期三框最大，因为星期三是最长的单词。

我是否理解正确，为什么宽度会像这样影响 flex 元素？

我做了自己的研究并发现了这样的问题:What are the differences between flex-grow and width? .但是，我还没有找到问题的答案。我还在此处阅读了有关 flex grow 属性的信息:https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-grow-property

Answer 1

需要注意的是，flex 容器中的width、height 和flex-basis 代表初始大小 元素。

一旦确定了尺寸，然后 flex-grow 和 flex-shrink 进入画面并在可能的情况下完成它们的工作。这可以改变初始大小。

现在，让我们将您的问题分解为要点:

Notice the width of 1000px. When I load the page there are five rows as I would expect. If I remove the width property, then the boxes appear on one row as expected.

好的

---

Now if I add a width of 1px, then the only change is that all boxes are the same size i.e. 372.28 pixels (not 1px).

您的意思是“例如，372.28 像素(不是 1 像素)”，而不是“即”，因为元素的大小会根据视口(viewport)的大小而变化。换句话说，每个元素的大小将随着您调整窗口大小时缩放。但这不是重点。

所有的盒子确实是等长的。发生这种情况是因为 width 设置为 1px。

如果您要删除 width 规则，则框的长度将根据其内容长度而变化。这是因为默认的 width/flex-basis 是 auto。

---

If any width is added to the flex items that means they can all fit on one row then make sure all boxes are the same size.

不一定。

width 属性并不总是与所有适合一行的元素相关。该行为由 flex-wrap 和 flex-direction 属性控制。

此外，width 属性并不总是与所有具有相同长度的元素相关。 flex-grow 等其他因素可能会产生影响。

---

If a width is added to the flex items meaning they cannot all fit on one row then honour the width.

不一定。

flex-grow、flex-shrink 和 flex-wrap 都会产生影响。

如果您希望元素的width/flex-basis 保持固定，请同时设置flex-shrink 和flex -grow 到 0(禁用这些功能)。

---

If a width is not added then the boxes can be any size i.e. the Wednesday box is biggest in this case because Wednesday is the longest word.

不一定。

flex-grow、flex-shrink 和 flex-wrap 都会产生影响。

---

更多详情:

• Make flex-grow expand items based on their original size
• Flex items are shrinking below flex-basis