柔性元素之間的間距？

Question

JSFiddle

我有柔性顯示的列表：

<ul> 
    <li></li> 
    .... 

ul{ 
    list-style-type: none; 
    display: flex; 
    flex-wrap: wrap; 
    background: gold; 
} 

li{ 
    flex-basis: 25%; 
    background:grey; 
} 

現在，我想我的li元素之間的一些空間，增加保證金或填充推到下一行中的元素（我要爲柔性包裝當我有超過4個元素）。

我知道上面的問題可以通過框尺寸來解決，但是我的主要問題是我想要元素之間的間距，但是第一個元素和最後一個元素要排列在父元素的左側和右側。

這是如何實現的？

例如。

|li|spacing|li|spacing|li|spacing|li| 

Answer 1

入住這OUT-我以前calc調整flex-basis允許定製margin是你們等可以分發的ul（用於justify-content: space-between分發該保證金）。

ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    background: gold; 
 
    margin: 10px; 
 
    padding: 0; 
 
    height: 100px; 
 
} 
 
li { 
 
    flex-basis: calc(25% - 20px); 
 
    background: grey; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

讓我知道你對這個意見。謝謝！

Answer 2

您需要了解的是，將flex-basis: 25%;設置爲25％會根據項目的長度和顯示大小，爲每行提供三項「關於」。這是因爲你沒有計算添加百分比的空間。

減少百分比，然後添加左填充，它的作品。

li{ 
flex-basis: 10%; 
background:grey; 
padding-left: 5px; 
}