JSFiddle
我有一个显示flex的列表：
<ul>
<li></li>
....
ul{
list-style-type: none;
display: flex;
flex-wrap: wrap;
background: gold;
}
li{
flex-basis: 25%;
background:grey;
}
现在我想在我的li元素之间留一些空格,添加边距或填充将元素推到下一行(当我有超过4个元素时,我想要flex包装).
我知道上面的内容可以通过框大小来解决,但我的主要问题是我想要元素之间的间距,但是第一个和最后一个元素排列在父元素的左侧和右侧.
怎么能实现这一目标？
例如.
|li|spacing|li|spacing|li|spacing|li|
解决方法
检查一下 – 我使用calc来调整flex-basis以允许你可以为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>
请告诉我您对此的反馈.谢谢！
