我想使用Flexbox，有一些项目，都是相同的宽度。我注意到Flexbox均匀地分配空间，而不是空间本身。
例如:
.header { 显示:flex; ｝ .item { flex-grow: 1; text-align:中心; 边框:1px纯黑色; ｝ < div class = "头" > < div class = "项目" > asdfasdfasdfasdfasdfasdf < / div > z < div class = "项目" > < / div > < / div >
第一项比第二项大得多。如果我有3个项目、4个项目或n个项目，我希望它们都出现在同一行上，每个项目的空间相等。
什么好主意吗?
http://codepen.io/anon/pen/gbJBqM
当前回答
这些答案都没有解决我的问题，那就是当我的临时折叠桌子被缩小到太小的宽度时，它们的宽度就不一样了。
对我来说，解决方案很简单:隐藏溢出;关于flex-grow: 1;细胞。
其他回答
这将工作，即使你包装项目，如网格，但不是那么简单，你应该显示它将包装在媒体查询))。
例子:
.flex-item {
flex: 0 0 calc(25% - (45px / 4))
}
它是这样工作的:
$n: 4; // Number of columns
$gap: 15px; // Margin pixels
.flex-parent {
display: flex;
gap: $gap;
}
.flex-item {
flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}
在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，以给予每个项相同的增长起点。
我也有类似的问题，所以找到了作弊的方法。
正如其他人所说，flex- base和flex-grow: 1是保持项大小相同的方法，但当项太少时，最后一行是例外(它们填满了所有可用空间，使它们比其他项更大)。为了防止这种情况发生，我添加了一个具有可见性的空间隔项:hidden，并根据快速计算有多少项来设置内联的flex- growth值。
如果您知道父容器的宽度，这就更容易了，但即使您不知道，也可以使用媒体查询和断点在间隔器上设置伸缩增长值。
