html - 如何覆盖 flexbox justify-content : space-between?

Question

是否可以覆盖 space-between 以便最后一项与倒数第二项水平对齐？还是我应该放弃 space-between 并使用 flex-start 和自定义边距？

JSfiddle Demo

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 300px;
  margin: 30px auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
.item {
  width: 90px;
  height: 90px;
  background-color: #111;
  margin-bottom: 10px;
}
.next-to-last {
  background-color: blue;
}
.last-item {
  background-color: red;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item next-to-last"></div>
  <div class="item last-item"></div>
</div>

Answer 1

伪元素方法:

您可以为第 4 项添加一个假元素，以便 5 和 6 彼此相邻。

如果您使用 visibility: hidden 隐藏元素并保留其占用的空间，这将起作用。常见的替代方案 display: none 将不起作用，因为该元素不是在 flexbox 对齐方式中计算的。

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 300px;
  margin: 30px auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
.item {
  width: 90px;
  height: 90px;
  background-color: #111;
  margin-bottom: 10px;
}
.next-to-last {
  background-color: blue;
}
.last-item {
  background-color: red;
}
.invisible {
  visibility: hidden;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item invisible"></div> <!-- Invisible fake element -->
  <div class="item next-to-last"></div>
  <div class="item last-item"></div>
</div>

---

自定义 margin 方法:

如果您不想创建额外的元素，那么您需要使用您自己的建议 flex-start 和自定义边距。

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 300px;
  margin: 30px auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
.item {
  width: 90px;
  height: 90px;
  background-color: #111;
  margin-bottom: 10px;
  margin-right: 10px;
}
.next-to-last {
  background-color: blue;
  margin-left: 100px;
}
.last-item {
  background-color: red;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item next-to-last"></div>
  <div class="item last-item"></div>
</div>