与 flex-grow 一起使用的 width 属性的影响？

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>

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

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

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

我是否正确理解了这一点，为什么宽度会像这样影响弹性项目？

我进行了自己的研究，发现了这样的问题：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 进入图片并在可能的情况下完成他们的工作。这可以改变初始大小。

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

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

好的

---

现在，如果我添加 1px 的宽度，那么唯一的变化是所有框的大小相同，即 372.28 像素（不是 1px）。

您的意思是“例如，372.28 像素（不是 1px）”，而不是“即”，因为项目的大小会根据视口的大小而有所不同。换句话说，每个项目的大小将随着您调整窗口大小而缩放。但这不是重点。

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

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

---

如果为弹性项目添加了任何宽度，这意味着它们都可以放在一行中，那么请确保所有框的大小相同。

不一定。

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

此外，width 属性并不总是与长度相同的项目相关。其他因素（例如 flex-grow）可能会产生影响。

---

如果向 flex 项目添加宽度意味着它们不能全部放在一行中，则遵循该宽度。

不一定。

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

如果您希望项目的width / flex-basis 保持固定，请将flex-shrink 和flex-grow 都设置为0（这会禁用这些功能）。

---

如果不添加宽度，则框可以是任意大小，即周三的框在这种情况下最大，因为周三是最长的单词。

不一定。

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

---

更多细节：

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