Flexbox - 在左对齐项目时使用“Space-between”

Question

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

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

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

有没有办法使用“space-between”功能在每个项目之间自动采用正确的边距，但如果少于 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 容器，等于应用在任一侧的 flex 子级上的边距。
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>