包含在flexbox网格中的flex项目的相等边距空间

Question

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

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

我的代码到目前为止：

 .grid { display: flex; flex-wrap: wrap; } .gridColumn { flex: 1 1 0px; background-color: lightblue; min-width: 200px; } 

 <div class="grid"> <div class="gridColumn"> <p>first column</p> </div> <div class="gridColumn"> <p>second column</p> </div> <div class="gridColumn"> <p>third column</p> </div> </div> 

现在，我想仅在列之间设置边距（也不在网格的两侧），当调整屏幕大小时，这也应该正确。 有人知道实现这个目标的方法吗？

Answer 1

您可以为网格项添加边距...

.gridColumn {
    margin: $margin;
}

...然后由其容器抵消。

.grid {
    margin: -$margin;
}

为避免溢出，您可以将overflow-x: hidden应用于body 。

Codepen示例

Answer 2

它在这部分代码上崩溃了

.gridColumn + .gridColumn {margin-left：20px; }

您应该尝试使用媒体查询并设置margin-left：0; 在小屏幕上。

上面的部分代码仍在工作，因为flex-wrap只改变了“第三列”的位置，该列之前仍然有“姐妹”，而margin-left正在工作。