的Flex網格項目的奇數和

Question

確定這是給我一個相當頭痛之間的固定保證金...

這是我的代碼/例如

https://codepen.io/anon/pen/xXpjYa

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.imageContainer { 
 
    flex: 1 0 30%; 
 
    height: 200px; 
 
    border: 5px solid black; 
 
    background-color: deeppink; 
 
    margin:15px; 
 
} 
 

 
.imageContainer:empty { 
 
    height: 0; 
 
    border: none; 
 
}; 
 

<div class="flex"> 
 
    <div class="imageContainer">a</div> 
 
    <div class="imageContainer">a</div> 
 
    <div class="imageContainer">a</div> 
 
    <div class="imageContainer">a</div> 
 
    <div class="imageContainer"></div> 
 
    <div class="imageContainer"></div> 
 
</div>

問題是我想實現/修復兩件事：

• 的最左邊和最右邊的列應觸摸視口的邊緣
• 固定間隙應30PX並且只有粉箱伸展響應
• 通知的最後一個項目（5）比稍寬其他......爲什麼？

請大家幫忙！謝謝！

Answer 1

您將邊距設置爲15px，在.imageContainer上，這適用於所有邊，包括這兩個imageContainer s和視口之間的邊。所以基本上你的第一個問題和你的第二個問題是在互相對抗。

您可以在.imageContainer上設置邊距，並在父級.flex上設置負邊距來完成這兩項操作。

最後一個可見的項目更長，因爲它後面的兩個div合攏而不顯示，這會影響佈局。如果您將css屬性box-sizing: border-box添加到您的.imageContainer規則中，它將解決此問題。您也可以指定一個固定高度至.imageContainer，或將內容添加到所有.imageContainer div以防止發生此情況。

查看this codepen的修改後的代碼。

Answer 2

而不是保證金使用justify-content: space-between和設置flex: 0 0 30%而不是flex: 1 0 30%。最後一項更大，因爲其他兩項沒有邊界。

body { 
 
    margin: 0; 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.imageContainer { 
 
    flex: 0 0 30%; 
 
    height: 200px; 
 
    border: 5px solid black; 
 
    background-color: deeppink; 
 
    margin: 15px 0; 
 
} 
 
.imageContainer:empty { 
 
    height: 0; 
 
    border: none; 
 
}

<div class="flex"> 
 
    <div class="imageContainer">a</div> 
 
    <div class="imageContainer">a</div> 
 
    <div class="imageContainer">a</div> 
 
    <div class="imageContainer">a</div> 
 
    <div class="imageContainer"></div> 
 
    <div class="imageContainer"></div> 
 
</div>