<分区>
<分区>
我正在尝试让一组 div(具有初始宽度)在容器中拉伸(stretch)，并在需要时扩展它们的宽度。这在使用 display:flex 时效果很好，但是如果它换行到新行，如果有任何剩余空间，我不希望新行上的元素拉伸(stretch)。我希望新行元素与容器中的其他元素保持相同的宽度。
例如，在这段代码中:
.container
{
display:flex;
flex-wrap:wrap;
}
.container > div
{
width:100px;
height:100px;
border:1px #fff solid;
text-align:center;
font-size:2em;
background:#66f;
flex-grow:1;
}<!DOCTYPE html>
<html>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>JSFiddle 链接，如果需要:https://jsfiddle.net/xodzL4b9/
如果调整窗口大小，5 最终将换行到新行，但会增长到整个行宽。我希望它位于新行上，但保持 flex 为第一行上的所有元素计算的宽度。
这可能与 Flex(或一般的 CSS)有关，还是我需要使用 Javascript？
值得注意的是，我不知道每行有多少个元素，所以我不能指定一个百分比作为宽度。这是一个响应式布局，我不希望容器的任何一侧都有间隙。
编辑:
“GAP = BAD”图像是我不想要的。这很容易实现 显示:内联 block 。
右上角的图像使用了 display:flex 并且很好，除了 box 25 被拉伸(stretch)到屏幕的 100%。我不想要这个。
底部的 2 张图片正是我想要的。不管 分辨率(并且不使用大量媒体查询来支持每个 resolution)，方框会拉伸(stretch)以填补空白，并且始终是 一样的宽度。没有使用百分比宽度，因为分辨率很小 将对大分辨率使用不同的百分比。
最佳答案
您可以使用 CSS-grid 实现此目的:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.container>div {
height: 100px;
border: 1px #fff solid;
text-align: center;
font-size: 2em;
background: #66f;
}<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>关于html - 可以使用 CSS Flexbox 在每一行上拉伸(stretch)元素同时保持一致的宽度吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50283861/