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

“否则在响应期间，我必须消除奇数/平均/第一/最后等的边距以确保整个容器被占用。”

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

在Flex容器的父级上添加overflow: hidden以避免水平滚动。
延伸弹性容器，两侧的负边距等于两侧柔性儿童的边距。
在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>

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

1 个答案: