html – flex元素之间的间距？

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>

请告诉我您对此的反馈.谢谢！