使用flexbox實現特定網格

我使用flexbox爲我的網站創建網格。該網格用於文章存檔，並應在每篇文章之間顯示每行3頁的邊距。使用flexbox實現特定網格

問題是：我需要文章框在行的開始處開始，並在行的末尾完全結束。所以顯而易見的是我使用justify-content: space-between;。所以這個，除了flex-wrap: wrap創建我需要的網格。直到我有一些奇數的文章。然後justify-content酒店在該行的中間留下了一個空白，因爲你可以在下面的例子中看到：

http://codepen.io/Naxon/pen/NbNXVj

這對我來說很重要，不管容器的寬度是什麼，項目將在開始時開始並結束。

我該如何做到這一點？

來源

2016-11-13 Daniel

Flexbox不支持項目間填充，但我們可以用calc()和margin來僞造它。 Codepen

.container { 
 
    width: 800px; 
 
    height: 800px; 
 
    background-color: blue; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    /*justify-content: space-between;*/ 
 
} 
 

 
.item { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: green; 
 
    /* margins */ 
 
    margin-left: 10px; 
 
    /* figure out width taking margins into account */ 
 
    flex-basis: calc((100% - 20px)/3); 
 
} 
 
/* clear margin on every third item starting with the first */ 
 
.item:nth-child(3n+1) { 
 
    margin-left: 0; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

來源

2016-11-13 10:53:32 Ouroborus

使用flexbox實現特定網格

回答

相關問題