带有“向左浮动”的框的 Flex wrap 布局-使最后一行框的宽度与其余框的宽度相同[重复]答案

【问题标题】：Flex wrap layout with boxes that "float left" - make the last row boxes same width as the rest [duplicate]带有“向左浮动”的框的 Flex wrap 布局-使最后一行框的宽度与其余框的宽度相同[重复]
【发布时间】：2019-09-26 12:26:02
【问题描述】：

我有一个带框的布局。盒子的数量是动态的，具体取决于我从服务器检索到的 JSON。这些盒子需要成行堆叠，并且盒子里面的所有内容都必须完全显示出来，但盒子数量最多的行不应该留下任何空隙。

我通过在父级上使用flex-wrap: wrap 和在框上使用flex: 1 实现了这一点。

但是，如果最后一行没有与其他行一样多的框，则它们不应一直延伸到父行的宽度。

如前所述 - 盒子数量最多的行不应留下任何间隙，并且应占据整个剩余空间

这甚至可能吗？如果是 - 怎么办？

这是一个显示问题的小提琴：https://jsfiddle.net/ymcwnbo2/1/

【问题讨论】：

尝试使用 CSS 网格：jsfiddle.net/5bqL07ct

标签： html css layout sass flexbox

【解决方案1】：

将以下内容添加到容器中

justify-content: flex-start

并从盒子中删除 flex:1

检查这个https://jsfiddle.net/ymcwnbo2/

【讨论】：

是的，正如我在问题中提到的那样，这会留下一些空白。