Html 包裹在flexbox网格中的flex项目的等边距空间

我正在尝试使用flexbox创建响应网格：

• 在大屏幕上，一行应该有三列
• 在较小的屏幕上，只有两行或一行

到目前为止，我的代码是：

.grid{
显示器：flex；
柔性包装：包装；
}
.gridColumn{
弹性：10像素；
背景颜色：浅蓝色；
最小宽度：200px；
}

第一列

第二列

第三纵队

这部分代码崩溃了

.gridColumn+.gridColumn{ 左边距：20px； }

您应该尝试使用媒体查询并设置左边距：0；在小屏幕上

---

上面的部分代码仍然有效，因为flex wrap仅更改了“第三列”的位置，该列之前仍然有“姐妹”且左边距有效。

您可以向网格项添加边距

.gridColumn {
    margin: $margin;
}

。。。然后由其容器进行偏移

.grid {
    margin: -$margin;
}

为了避免溢出，您可以将

overflow-x:hidden

应用于

正文

---

除非媒体查询，否则类似的内容可能对您有用：@Michael_B不幸的是，这不起作用–列之间应该只有一个边距，而不是网格的左右两侧。