css - Flexbox - 在左对齐元素时使用 "Space-between"

Question

我正在尝试实现 flexbox，但遇到了困难。我有一排元素，范围从 1 到 4。当所有四个元素都可见时，“space-between”属性完美地工作确保每个元素之间的空间是正确的并且在左边没有空间第一项，或最后一项的右侧。整个容器都被占用了。这很棒。

但是，如果我有 2 或 3 个元素，那就有点不对劲了。 Flexbox 自然地在这些元素之间提供了一个空间。如果有 2 个元素，一个左对齐，另一个右对齐。如果有三个，第二个自然在中间。

我遇到的问题是我希望能够定义我的元素的宽度，而不是边距。否则在响应期间，我将不得不消除奇数/偶数/第一/最后等的边距，以确保占用整个容器。

有没有办法使用“间隔”功能自动在每个元素之间采用正确的边距，但如果少于 4 个，则确保所有元素都左对齐？

我下面的示例显示了自然结果。最后一项是我希望它如何工作。然而，我不得不为每个定义一个边距，这是我想避免的。

如有任何帮助，我们将不胜感激。

.row {
  width:1280px;
  margin:0 auto 0;
  margin-bottom:20px;
  background:#ebebeb;
}

ul {
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:space-between;
}

li {
  width:23%;
  background:#999
}

.row--ideal ul {
    justify-content:flex-start;  
}

.row--ideal ul li {
  margin-right:35px;
}

<div class="row">
  <ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
  </ul>
</div>

<div class="row">
  <ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
  </ul>
</div>

<div class="row">
  <ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
  </ul>
</div>

<div class="row row--ideal">
  <h3>Ideal Result</h3>
  <ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
  </ul>
</div>

Answer 1

“否则在响应过程中，我将不得不消除奇数/偶数/第一个/最后一个等的边距，以确保占用整个容器。”

您不必为硬编码的子元素清除边距。这是诀窍:

1. 在 flex 容器的父级上添加 overflow: hidden 以避免水平滚动。
2. 从两侧扩展 flex 容器，负边距等于应用到 f​​lex 子元素两侧的边距。
3. 在 flex child 上添加相同的左/右边距。

.row {
  overflow: hidden;
  margin: 0 auto 20px;
  background: #ebebeb;
}

ul {
  margin:0;
  padding:0;
  list-style:none;
}

li {
  margin-bottom: 10px;
  background: #999;
}

@media (min-width: 768px) {
  ul {
    flex-wrap: wrap;
    display:flex;
    margin: 0 -1%;
  }
  li {
    margin-right: 1%;
    margin-left: 1%;
    width: 48%;
  }
}

@media (min-width: 1024px) {
  li {
    width: 23%;
  }
}

<div class="row row--ideal">
  <h3>Ideal Result</h3>
  <ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
  </ul>
</div>
<div class="row row--ideal">
  <h3>Ideal Result</h3>
  <ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
  </ul>
</div>