CSS flexbox（flex-grow / flex-basis） - 宽度相同，但不再包装

Question

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

我希望flexboxes使用所有可用的水平空间，所以我添加了flex-grow:1 。

然后我希望同一行上的每个项目具有相同的大小（例如，如果有两个项目则为50％，如果有三个项目则为33％，等等），因此我添加了flex-basis:0 。

但在第三步，项目不再包装。 如果我更改窗口宽度，则每行的项目数始终保持不变，并且其内容会被挤压。 我不希望这样。 我希望当一个项目的宽度小于它的内容时将它放在下一行，因为它在前两个步骤中起作用。 我尝试使用flex-shrink和其他东西，没有成功。

我能做什么 ？ 谢谢 ！

回答TL; DR：添加min-width: fit-content有效！

的jsfiddle

Answer 1

尽管您已将flex-wrap设置为wrap ，但没有为flex项目（ li ）定义width ，并且您将flex-basis设置为0.这意味着flex项目的初始主要大小为0.它赢了“ t wrap因为它可以缩小到零（即使flex-shrink属性为0）。

解决方案＃1

您可以做的一件事是将flex-basis属性设置为content或auto 。

li { flex-basis: auto; }

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

jsfiddle演示

flex-basis

弹性项目的初始主要大小。

auto

在flex项上指定时， auto关键字将使用main size属性的值作为使用的flex-basis 。 如果该值也是auto ，则使用的值是content 。

content

表示基于弹性项目内容的自动大小调整。

注意：请注意，灵活盒布局的初始版本中不存在content ，因此一些较旧的实现将不支持它。 等同的效果可以通过使用具有auto用的主尺寸（宽度或高度）一起auto 。

flexbox规范中的这个图试图解释flex-basis: 0和flex-basis: auto之间的区别。 这是一个更完整的解释。

---

解决方案＃2

在较小屏幕上垂直堆叠弹性项目的另一种方法是更改​​媒体查询中的flex-direction ：

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

jsfiddle演示

Answer 2

如果项目对于窗口宽度来说太大，我会使用媒体查询将元素的flex-direction更改为column 。 这会将列表中的项目放在彼此之下。

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>

CSS

.grid__row {
    margin: auto;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

.grid__row li {
    background: green;
    color: white;
    margin: 1px;
    padding: 15px;
    display:flex;
    flex: 1;
}

@media (min-width: 480px) {
    .grid__row--sm {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .grid__row--md {
        flex-direction: row;
    }
}

的jsfiddle

Answer 3

您不能将弹性基础设置为auto或content因为您希望所有框都具有相同的大小，因此flex-basis必须为0并且flex-grow设置为1 ，正如您已正确完成的那样。 您现在需要做的是在弹性项目上设置min-width （例如200px ）。 你的里程可能会有所不同，我相信safari（webkit一直在努力保持自谷歌眨眼之后）可能会因为flex-items min-width而flex-items 。

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

 ul { margin: auto; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } li { background: green; margin: 1px; flex: 1 0 200px; } 

 <ul> <li>1 small</li> <li>1 wide wide wide wide wide wide</li> </ul> <ul> <li>2 medium medium</li> <li>2 small</li> </ul> <ul> <li>3 small</li> <li>3 wide wide wide wide wide wide</li> <li>3 medium medium</li> </ul> 

Answer 4

感谢Michael_B和Adam，我找到了解决问题的方法。

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

min-width的fit-content值是关键。 它是实验性的（你可能需要添加一个浏览器前缀），但它完全符合我的要求：相同的宽度，带有包装！