Html 如何在flexbox容器内的iTen之间添加空间，而不阻止它们接触容器的边界？

我有一个固定宽度的容器。此外，它还可以容纳固定宽度、固定高度的物品。我希望容器内的项目之间有一个空间，但我也希望它们接触容器的边界。这样，我就不能只为每个项目添加一个边距，因为这会导致它们不接触容器的边界。请参见代码片段：

.集装箱{ 宽度：400px； 边框：4倍纯红； 显示器：flex； 柔性流：行换行； 证明内容：之间的空间； 对齐项目：居中； 对齐内容：之间的空间； 背景色：AAFF； } .项目{ flex:060px； 高度：100px； 宽度：60px； 高度：60px； 边框：2件纯蓝； 背景颜色：灰色； 框大小：边框框； } 福 福 福 福 福 福 福 福 福 福 福 福 福 福 福

---

这将在行之间添加所需的空间

.项目：第n个孩子n+7 { 边缘顶部：10px； }

它被称为结构伪类，请在此处阅读：

---

这将在行之间添加所需的空间

.项目：第n个孩子n+7 { 边缘顶部：10px； }

它被称为结构伪类，请在此处阅读：

---

我不知道css flex是否可以实现这一点，但是设置了所有的高度和宽度后，flex是非常不必要的，使用内联块可以轻松实现这一点

.container {
    width: 400px;
    border: 4px solid red;
    display: inline-block;
    background-color: #AAAAFF;
}

.item {
    display: inline-block;
    min-width: 60px;
    height: 60px;
    border: 2px solid blue;
    background-color: gray;
    box-sizing: border-box;
}

.item:nth-child(n+7){
    margin-top: 10px;
}

---

注意：我从Örvar的答案中添加了保证金修正，只是为了使答案完整，所以这要归功于他。请注意，如果您更改容器中任意一个项目的宽度，则可能需要调整n+7，因此这不是完全动态的，但我看不出其他方法可以做到这一点。

我不知道是否可以使用css flex实现这一点，但是设置了所有高度和宽度后，flex是相当不必要的，使用内联块可以很容易地做到这一点

.container {
    width: 400px;
    border: 4px solid red;
    display: inline-block;
    background-color: #AAAAFF;
}

.item {
    display: inline-block;
    min-width: 60px;
    height: 60px;
    border: 2px solid blue;
    background-color: gray;
    box-sizing: border-box;
}

.item:nth-child(n+7){
    margin-top: 10px;
}

---

注意：我从Örvar的答案中添加了保证金修正，只是为了使答案完整，所以这要归功于他。请注意，如果您更改容器中任一项的宽度，则可能需要调整n+7，因此这不是完全动态的，但我看不出其他方法可以做到这一点。

然后，假设您将“调整内容”设置为“flex start”，则可以将相同的技术应用于水平轴。看这个。要指出的是，对齐项目：居中；和对齐内容：之间的空间；不会有任何影响，因为容器高度是动态的。@pschueller我试图找到问题后半部分的解决方案：很有趣！然后，假设将“对齐内容”设置为“flex start”，则可以对水平轴应用相同的技术。看这个。要指出的是，对齐项目：居中；和对齐内容：之间的空间；不会有任何影响，因为容器高度是动态的。@pschueller我试图找到问题后半部分的解决方案：很有趣！