Css 如何设置项目之间的空间样式？

是否可以在flex中设置项目之间的空格样式

案例场景：

我有一种桌子/格子

我不希望项目增长（

flex-grow:0

）

我不希望项目之间有

空格

若并没有足够的剩余空间，则下一项将落在下一行

例如：

小提琴：

预期效果： 我想在这些间隔中添加一个底部边框。你觉得有可能吗？有什么想法吗

.container{
显示器：flex；
柔性包装：包装；
边框：1px实心#ccc；
边界底部：0；
最大宽度：470px；/*为便于示例*/
}
.项目{
显示：内联flex；
填充：10px；
边框底部：1px实心#ccc；
}

项目a
itemBitemB
项目CCCC
项目a
itemBitemB
项目CCCC
项目a
itemBitemB
项目CCCC

此解决方案不基于

flex

（我也想知道如何使用任何flex'ish规则解决它），但它是有效的

不是向元素添加边框，而是在每个项上添加绝对定位的

&:after

伪元素，并隐藏父项中的溢出

.container{
显示器：flex；
柔性包装：包装；
边框：1px实心#ccc；
边界底部：0；
最大宽度：470px；/*为便于示例*/
溢出：隐藏；/*
我会考虑使用渐变的另一种方法。诀窍是有一个梯度，它会重复每一行来覆盖出现的每一行。你只需要知道你的行的高度，它是基于<代码>行高< /COD>和<代码>填充< /代码> < /P>。

.container{
显示器：flex；
柔性包装：包装；
边框：1px实心#ccc；
线高：1.2米；
背景：
重复线性渐变（到底部，
透明0，透明钙（1.2em+20px），
#ccc计算（1.2em+20px），#ccc计算（1.2em+21px））；
最大宽度：470px；/*为便于示例*/
}
.项目{
显示：内联flex；
填充：10px；
}

项目a
itemBitemB
项目CCCC
项目a
itemBitemB
项目CCCC
项目a
itemBitemB
项目CCCC
棘手的问题。这里有一些想法：嗯……如果没有元素，它就不能有边框……也不能为不存在的行设置样式。
调整内容：间隔；
关于
.container
？@ToniMichelCaubet OP声明“我不想要项目之间的间隔”很抱歉，您编辑了这个问题。所以问题是边框无法填充容器？是的……这也是我最初的想法。+1工具解决方案！您能解释一下
宽度：600%；取决于项目。长度
？注意：项目宽度不是固定的，所有项目都有适合内容的宽度。任何非常大的宽度都可以……我建议100vw不会100%够了吗？：p将试用它，并将其标记为正确，同时将其标记为魅力。谢谢各位！