Html flex grow使用的width属性的影响？

请参阅下面的代码：

ul{
显示器：flex；
列表样式类型：无；
柔性包装：包装；
}
李{
柔性生长：1；
边框：1px实心；
宽度：1000px；
}

星期一
星期二
星期三
星期四
星期五

需要注意的是，弹性容器中的

宽度

、

高度

和

弹性基础

代表物品的初始尺寸

一旦确定了该尺寸，然后

flex-grow

和

flex-shorn

进入图片并尽可能完成工作。这会改变初始大小

现在，让我们把你的问题分为几点：

注意1000px的宽度。当我加载页面时，正如我所期望的那样，有五行。如果删除

width

属性，则框将按预期显示在一行上

嗯

---

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

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

所有的盒子都是等长的。这是因为

宽度设置为
1px

如果要删除
宽度
规则，则框的长度将根据其内容长度而变化。这是因为默认的
宽度
/
弹性基础
是
自动


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

不一定

width
属性并不总是与一行中的所有配件相关。该行为由
flex wrap
和
flex direction
属性控制

另外，
width
属性并不总是与所有长度相等的项目相关。其他因素（如
flex-grow
）也会产生影响


如果弹性项目增加了一个宽度，这意味着它们不能全部放在一行上，则应遵守该宽度

不一定

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

如果希望项目的
宽度
/
弹性基准
保持不变，请将
弹性收缩
和
弹性增长
设置为
0
（这将禁用这些功能）


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

不一定

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


更多详情：




宽度定义了初始尺寸，flexgrow稍后将消耗所有剩余的可用空间。您还应该考虑Flex收缩因子，因为定义一个非常大的不会因为收缩效应而产生溢出。检查这个：。。它给出了一个比传统算法更容易解释的算法Spec@TemaniAfif，如果指定了1px的宽度（参见我文章的第一点），为什么所有的盒子都是相同的尺寸（372.8像素）？谢谢。因为它们都是从1px开始，然后都会增长相同，所以所有的宽度都相同。任何宽度都将忽略此结果，除非没有更多可用空间且元素将开始t wrap