Html 收缩父元素以消除换行级别子元素后留下的间隙

我有一个居中的框，其中包含许多并排显示的元素，可能会绕成几行。在调整大小时，我希望长方体缩小。元素应保持相同的大小，必要时缠绕到其他线条上

我可以想出几种处理方法（例如，将子项设置为

display:inline block

或

float:left

，或将父项设置为

display:flex；flex flow:row wrap；

）

在每个场景中，调整大小都会导致元素换行。但是，这会在直线上的最后一个元素和父元素的边缘之间留下间隙。这种行为在大多数情况下都是完全合理的，但在这里，它将元素从视觉上拉离中心

如果我能应用一些CSS魔法，让父框“收缩”到子元素实际占用的宽度，忽略行尾空间，我会很高兴。我希望

display:table

能在这里救我，但没有这样的运气

我认识到一种解决方法是使用弹性框，指定

justify content:space-between

（或者不使用弹性框，只需

text-align:justify

）。这将通过在元素之间分配未使用的空间来消除间隙，但我不希望在项目之间有空间

以下是一些描述该问题的图片：/

请参阅下面的代码片段（我相信您需要运行整个页面才能让它响应调整大小）

正文{
填充：50px；
背景：粉红色；
}
.外部{
显示器：flex；
柔性流：行换行；
最大宽度：600px；
保证金：0自动；
填充：10px；
背景：黄色；
}
.项目{
宽度：100px；
高度：100px；
}
.a{
背景：绿色；
}
.b{
背景：蓝色；
}

---

我做了更多的研究，以迈克尔的评论为出发点

得出结论，使用纯CSS很难让容器以这种方式收缩

发件人：

浏览器在初始级联上渲染容器。没有 当子文件换行时，重新流式处理文档

---

当容器内容只有一个已知宽度时，最简单的解决方法可能是使用媒体查询来设置容器宽度。断点将出现在基本内容宽度的倍数处，最多可达最大列数。这是描述和演示的。

可能重复：可能重复：谢谢@Michael_B，我会检查这些。不知道我怎么没早点找到这些！