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

如何解决与flex-grow一起使用的width属性的影响？

请参见下面的代码：

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属性，则这些框将按预期显示在一行上。

现在，如果我添加1px的宽度，则唯一的变化是所有框的尺寸都相同，即372.28像素（而不是1px）。在我看来，行为如下：

如果在弹性项目上添加了任何宽度，这意味着它们都可以容纳在一行中，那么请确保所有盒子的大小都相同。
如果在弹性项目中添加了宽度，则表示它们不能全部容纳在一排，则遵循该宽度。
如果未添加宽度，则框可以是任意大小，即，在这种情况下，周三框最大，因为周三是最长的单词。

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

我进行了自己的研究，发现了类似以下问题：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

解决方法

请注意，flex容器中的width，height和flex-basis代表项目的初始尺寸。

确定大小后，然后 flex-grow和flex-shrink进入图片，并尽其所能。那可以改变初始大小。

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

注意宽度为1000像素。当我加载页面时，正如我期望的那样，有五行。如果我删除width属性，则这些框将按预期显示在一行上。

好

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

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

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

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

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

不一定。

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

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

如果在弹性项目上添加了宽度，则意味着它们不能全部排成一行，那么就遵守该宽度。

不一定。

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

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

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

不一定。

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

更多详细信息：

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

如何解决与flex-grow一起使用的width属性的影响？

解决方法

相关推荐