Html 孤立内联div

我有一系列内联块div，根据浏览器在给定时间的宽度，它们可以换行到第二行。这是一个例子。例如，它可能如下所示：

但是，如果视口具有一定的宽度，则它可能在下一行中只包含一个孤立的内联块：

是否有一种CSS方法本质上是某种形式的“孤立控制”（CSS

orphan

在这种情况下似乎不适用），这样，如果第二行上的元素少于一定数量，它会将更多的元素包装到那里，以平衡情况

.container{
宽度：100%；
}
.项目{
显示：内联块；
宽度：50px；
背景颜色：蓝色；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7

这里有一个使用CSS网格的想法，诀窍是确保div的宽度表示为固定数量的倍数，以确保永远不会有孤立元素

.wrapper{
--w:100px；/*一个项目的宽度*/
显示：网格；
网格模板列：重复（自动拟合、计算（2*var（--w））；/*该项将以二乘二的方式断开*/
证明内容：中心；
}
.集装箱{
网格柱：1/-1；
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.项目{
宽度：计算值（var（--w）-10px）；
保证金：5px；
}
/*无关风格*/
.集装箱{
计数器复位：num；
}
.项目{
高度：150像素；
背景颜色：蓝色；
颜色：#fff；
}
.项目：：之前{
颜色：#fff；
内容：attr（class）“”计数器（num）；
计数器增量：num；
}

---

您可以使用flex和flex-wrap进行此操作，并带有断点，这样您就可以确定每个宽度的顶行中有多少项。在最后一行不可避免地有一个项目的地方，这段代码用于最小化行数

这一切都可以使用CSS变量，所以选择很容易改变，但是你不能在媒体查询中使用变量，所以我们必须手工输入

.container{
宽度：104px；/*项目宽度加上2批填充物*/
保证金：0；
填充：0；
证明内容：中心；
显示器：flex；
柔性包装：包装；
}
@介质（最小宽度：312px）{
.集装箱{
宽度：312px；
}
}
@介质（最小宽度：416px）{
.集装箱{
宽度：416px；
}
}
@介质（最小宽度：728px）{
.集装箱{
宽度：728px；
}
}
.项目{
r-尺寸：边框框；
宽度：100px；
背景色：青色；
文本对齐：居中；
flex:0 0 100px；/*使100px更易于在不同宽度上进行测试*/
保证金：2倍；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7

如果移动到第二行，您希望每个项目仍然固定在50px的宽度，还是扩展以覆盖更多的空间（这是您的第一张图像的样子）.@A Haworth我想在第二个屏幕上保持相同的大小——为了让它包装起来，我必须调整浏览器窗口的大小，这使得StackOverflow的图像变得更宽一些。谢谢