Html 等宽度弹性项目，即使在包装后也是如此

有没有可能制作出这样一个纯CSS解决方案：

项目有一些

最小宽度

它们应该动态增长以填充所有容器宽度，然后换行为新行

列表中的所有项目的宽度应相等。

这就是它现在的样子：

这也是我希望它看起来的样子（我已经手动管理了那些底部项目的宽度，只是为了显示预期的结果）：

.container{
显示器：flex；
柔性包装：包装；
}
.项目{
背景：黄色；
最小宽度：100px；
高度：20px；
文本对齐：居中；
边框：1px纯红；
柔性生长：1；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

没错，没有纯CSS解决方案。 Flexbox总是尝试用可增长的项目填充整个容器宽度。因此，您需要插入一些隐藏项，这些隐藏项将填充空白，同时用户不可见

试试这个：

.container{
显示器：flex；
柔性包装：包装；
}
.项目{
背景：黄色；
最小宽度：100px；
高度：20px；
文本对齐：居中；
边框：1px纯红；
柔性生长：1；
}
.隐藏的项目{
最小宽度：100px；
柔性生长：1；
边框：1px实心透明；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

目前，flexbox没有提供用于对齐最后一行或最后一列中的灵活项目的干净解决方案。这超出了当前规范的范围

下面是人们用来解决这个问题的更多信息和各种解决方案：

但是，最后一行对齐对于另一种CSS3技术，网格布局来说不是问题。事实上，使用此方法非常简单（并且不需要更改HTML）：

.container{
显示：网格；
网格模板列：重复（自动拟合，最小值（100px，1fr））；
网格自动行：20px；
网格间距：5px；
}
.项目{
背景：黄色；
文本对齐：居中；
边框：1px纯红；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

也许不是最干净的方式，但肯定能完成任务。谢谢您是否有指向这些multiple:：after伪元素的资源的链接？听起来很有趣。这也会允许多个：：before伪元素吗？如果项目计数是动态的，那么“隐藏项目”的问题是无法知道要添加多少。即使在2018年底，对flexbox

行间距和
列间距的支持也非常有限，这仍然可以说是解决此问题的最佳全面解决方案。除了IE之外，现在对grid的浏览器支持非常好。