html - flex 元素之间的间距？

Question

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 wrap)。

我知道上面的问题可以通过框大小来解决，但我的主要问题是我想要元素之间的间距，但第一个和最后一个元素要与父元素的左侧和右侧对齐。

如何实现？

例如。

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

Answer 1

检查一下 - 我使用 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>

让我知道您对此的反馈。谢谢!