Html CSS flexbox（flex-grow/flex-basis）-宽度相同，但不'；不要再包装了

我使用FlexBox来组织页面上的元素

我希望FlexBox使用所有可用的水平空间，因此我添加了

flex grow:1

然后，我希望同一行中的每个项目具有相同的大小（例如，如果有两个项目，则每个项目为50%，如果有三个项目，则为33%，等等），因此我添加了

弹性基础：0

但在第三步，这些物品不再包装。如果我更改窗口宽度，则每行的项目数始终保持不变，并且它们的内容会被压缩。我不想那样。我希望当一个项目的宽度小于其内容时，将其放在下一行，因为它在前两个步骤中起作用。我试着玩

flex-shrink

和其他东西，但没有成功

我能做什么？谢谢

回答TL；DR:添加

最小宽度：适合内容

有效

---

如果项目对于窗口宽度来说太大，我会使用媒体查询将元素的

弹性方向更改为
列。这将使列表中的项目相互位于下方

HTML

<ul class="grid__row grid__row--sm">
    <li>1 small</li>
    <li>1 wide wide wide wide wide wide</li>
</ul>
<ul class="grid__row grid__row--sm">
    <li>2 medium medium</li>
    <li>2 small</li>
</ul>
<ul class="grid__row grid__row--md">
    <li>3 small</li>
    <li>3 wide wide wide wide wide wide</li>
    <li>3 medium medium</li>
</ul>

尽管您将
弹性包装设置为
弹性包装
，但没有为弹性项目（
li
）定义
宽度
），并且您将
弹性基础
设置为0。这意味着flex项的初始主大小为0。它不会换行，因为它可以收缩到零（即使
flex-shrink
属性为0）

解决方案#1
您可以做的一件事是将
flex basis
属性设置为
content
或
auto

li { flex-basis: auto; }

这会告诉flex项考虑其内容的宽度



弹性项的初始主尺寸

自动

在弹性项上指定时，
auto
关键字检索值
作为所使用的弹性基础的主尺寸属性的。如果该值为
同样
auto
，则使用的值为
content

内容

表示根据弹性项的内容自动调整大小

注意：请注意，
内容
在最初的版本中不存在
灵活的方框布局，因此一些较旧的实现不会
支持它。同时使用
auto
可以达到相同的效果
主要尺寸（宽度或高度）为
auto

li { flex-basis: auto; }

来自的此图试图解释
flex-basis:0
和
flex-basis:auto
之间的区别



解决方案#2
在较小屏幕上垂直堆叠flex项目的另一种方法是更改媒体查询中的：

@media screen and ( max-width: 500px ) {
    ul { flex-direction: column; }
    li { flex-basis: auto; }
}

您不能将flex basis设置为
auto
或
content
，因为您希望所有框的大小相同，因此
flex basis
必须设置为
0
，
flex grow
设置为
1
，正如您所做的那样。您现在需要做的是在flex项目上设置
最小宽度
（例如
200px
）。您的里程可能会有所不同，我相信safari（自google进入blink以来，webkit一直在努力保持速度）可能在
flex items
上出现
min width
故障

或者，您可以将flex basis设置为
min width
属性，即使在safari中也可以使用该属性（
flex:1 0 200px
）


ul{
保证金：自动；
填充：0；
列表样式类型：无；
显示器：flex；
柔性包装：包装；
}
李{
背景：绿色；
保证金：1px；
flex:10200px；
}

1小
1宽-宽-宽


2中等
2小


3小
3宽-宽-宽
3中等
多亏了Michael_B和Adam，我找到了问题的解决方案

flex-grow: 1;
flex-basis: 0;
min-width: fit-content;

min width
的
fit content
值是这里的关键。这是实验性的（你可能需要添加一个浏览器前缀），但它完全符合我的要求：相同的宽度，带换行符
 谢谢你的详细回答。但是，对于解决方案#1，同一行上的项目不再具有相同的宽度（为此，我必须将
flex basis
设置为0）。解决方案2可能可行，但消除了使用FlexBox的一个好处，即自动调整项目和屏幕宽度（没有像素的“硬数字”）。媒体查询中的500px仅用于演示。您也可以使用相对单位和
calc
。谢谢您的回答。我不想在代码中用像素表示“硬数字”，因为使用FlexBox的一个好处是自动调整项目和屏幕宽度。然而，答案是你所说的
minwidth
。