柔性元素之间的间距？

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; 
}