Adam给出的公认答案(flex: 11 10)非常适合宽度固定或由祖先决定的flexbox容器。你想让孩子们适应容器的情况。

但是，您可能会遇到这样的情况:您希望容器能够容纳子容器，并且基于最大的子容器，子容器的大小相同。你可以通过以下方法使flexbox容器适合它的子容器:

设置位置:绝对和不设置宽度或右，或 将其放置在带有display: inline-block的包装器中

对于这种灵活的容器，接受的答案不工作，孩子的大小不相等。我认为这是flexbox的一个限制，因为它在Chrome、Firefox和Safari中表现相同。

解决方案是使用网格代替flexbox。

当您运行此代码片段时，请确保单击整个页面以正确地查看效果。

body { margin: 1em; } .wrap-inline-block { display: inline-block; } #div0, #div1, #div2, #div3, #div4 { border: 1px solid #888; padding: 0.5em; text-align: center; white-space: nowrap; } #div2, #div4 { position: absolute; left: 1em; } #div0>*, #div1>*, #div2>*, #div3>*, #div4>* { margin: 0.5em; color: white; background-color: navy; padding: 0.5em; } #div0, #div1, #div2 { display: flex; } #div0>*, #div1>*, #div2>* { flex: 1 1 0; } #div0 { margin-bottom: 1em; } #div2 { top: 15.5em; } #div3, #div4 { display: grid; grid-template-columns: repeat(3,1fr); } #div4 { top: 28.5em; } <p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p> <div id="div0"> <div> Flexbox </div> <div> Width determined by viewport </div> <div> All child elements are equal size with {flex: 1 1 0} </div> </div> <p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p> <div class="wrap-inline-block"> <div id="div1"> <div> Flexbox </div> <div> Inside inline-block </div> <div> We want all children to be the size of this text </div> </div> </div> <div id="div2"> <div> Flexbox </div> <div> Absolutely positioned </div> <div> We want all children to be the size of this text </div> </div> <br><br><br><br><br><br> <p>So let's try a grid instead. Aha! That's what we want!</p> <div class="wrap-inline-block"> <div id="div3"> <div> Grid </div> <div> Inside inline-block </div> <div> We want all children to be the size of this text </div> </div> </div> <div id="div4"> <div> Grid </div> <div> Absolutely positioned </div> <div> We want all children to be the size of this text </div> </div>

在flex的子元素上，

flex: 1 1 25%

这将允许有四个项目。

如果你想增加更多的项目，那么你可以减少%。

这些答案都没有解决我的问题，那就是当我的临时折叠桌子被缩小到太小的宽度时，它们的宽度就不一样了。

对我来说，解决方案很简单:隐藏溢出;关于flex-grow: 1;细胞。

如果项的内容使列变大，则需要添加width: 0以使列相等。

.item {
  flex: 1 1 0;
  width: 0;
}

细节: Flex: 1 10和 flex-grow: 1;flex-shrink: 1;flex-basis: 0; 如果父容器不能为每个项的本地大小相加提供足够的空间(没有空间增长)，我们需要将宽度设为:0，以给予每个项相同的增长起点。

设置它们的弹性基数为0(这样所有元素都有相同的起点)，并允许它们增长:

flex: 1 1 0px;

您的IDE或linter可能会提到度量单位“px”是多余的。如果你省略了它(比如:flex: 11 10)， IE将不会正确地渲染它。所以px需要支持Internet Explorer，正如@fabb的评论中提到的那样;

Adam给出的公认答案(flex: 11 10)非常适合宽度固定或由祖先决定的flexbox容器。你想让孩子们适应容器的情况。

但是，您可能会遇到这样的情况:您希望容器能够容纳子容器，并且基于最大的子容器，子容器的大小相同。你可以通过以下方法使flexbox容器适合它的子容器:

设置位置:绝对和不设置宽度或右，或 将其放置在带有display: inline-block的包装器中

对于这种灵活的容器，接受的答案不工作，孩子的大小不相等。我认为这是flexbox的一个限制，因为它在Chrome、Firefox和Safari中表现相同。

解决方案是使用网格代替flexbox。

当您运行此代码片段时，请确保单击整个页面以正确地查看效果。

body { margin: 1em; } .wrap-inline-block { display: inline-block; } #div0, #div1, #div2, #div3, #div4 { border: 1px solid #888; padding: 0.5em; text-align: center; white-space: nowrap; } #div2, #div4 { position: absolute; left: 1em; } #div0>*, #div1>*, #div2>*, #div3>*, #div4>* { margin: 0.5em; color: white; background-color: navy; padding: 0.5em; } #div0, #div1, #div2 { display: flex; } #div0>*, #div1>*, #div2>* { flex: 1 1 0; } #div0 { margin-bottom: 1em; } #div2 { top: 15.5em; } #div3, #div4 { display: grid; grid-template-columns: repeat(3,1fr); } #div4 { top: 28.5em; } <p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p> <div id="div0"> <div> Flexbox </div> <div> Width determined by viewport </div> <div> All child elements are equal size with {flex: 1 1 0} </div> </div> <p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p> <div class="wrap-inline-block"> <div id="div1"> <div> Flexbox </div> <div> Inside inline-block </div> <div> We want all children to be the size of this text </div> </div> </div> <div id="div2"> <div> Flexbox </div> <div> Absolutely positioned </div> <div> We want all children to be the size of this text </div> </div> <br><br><br><br><br><br> <p>So let's try a grid instead. Aha! That's what we want!</p> <div class="wrap-inline-block"> <div id="div3"> <div> Grid </div> <div> Inside inline-block </div> <div> We want all children to be the size of this text </div> </div> </div> <div id="div4"> <div> Grid </div> <div> Absolutely positioned </div> <div> We want all children to be the size of this text </div> </div>