Flexbox justify-content：處理幾個元素之間的空間

有沒有可能性或解決方法，當我使用flexbox和justify-content：space-between？Flexbox justify-content：處理幾個元素之間的空間

這裏是我的代碼/演示，我的意思：

#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
#wrapper div { 
 
    width: 19%; 
 
    background: #ccc; 
 
    height: 50px; 
 
    margin-bottom: 20px; 
 
}

<div id="wrapper"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

這首10盒都還好，我想有這樣的事情的網格，但最後的應彼此相鄰，而不是這兩者之間的空間很大。

問候，馬庫斯

來源

2017-03-09 Sukrams

我不認爲它可以工作。在[原始文章]（https://css-tricks.com/filling-space-last-row-flexbox/）中，您會注意到不使用「space-between」。添加邊距，然後它將工作。在相關說明中，不要使用'background'來指定'background-color'（更多關於[here]（https://csswizardry.com/2016/12/css-shorthand-syntax-considered-an-反模式/））。 –

謝謝。我會檢查這個。「問題」是我想要輕鬆，清潔，而不是僅僅爲了邊緣而做的4或5件事情，我希望Flexbox會有一個很好的解決方案;） – Sukrams

嘗試這樣：

#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    
 
} 
 

 
#wrapper div { 
 
    width: 19%; 
 
    background: #ccc; 
 
    height: 50px; 
 
    margin-bottom: 20px; 
 
    margin-left:5px; 
 
}

<div id="wrapper"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2017-03-09 13:29:19

Flexbox justify-content：處理幾個元素之間的空間

回答

相關問題