包含在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正在工作。