html - 对齐弹性框中的最后一行

Question

我试图在一个弹性框中显示一个项目列表，每行三个项目。问题是当最后一行只有两个项目时，最后一个项目右对齐，而不是居中。

我尝试了其他线程中建议的解决方案，将 after 伪元素添加到父元素，但这并不完全有效，因为它将最后一个元素放在前一个元素旁边，它们之间没有空格。我怎样才能让它们正确对齐？

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
.container::after {
  content: '';
  flex: auto;
}
.item {
  flex: 0 0 30%;
}

<ul class="container">
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
</ul>

编辑：

这是一个新的片段，以澄清我的意思。我想要 li 元素之间的空间。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
.container::after {
  content: '';
  flex: auto;
}
.item {
  flex: 0 0 30%;
  background-color: blue;
  height: 100px;
  margin: 10px 0;
  border: 2px solid #999;
}

<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>  
</ul>

标签： htmlcssflexbox

Answer 1

要使用 30% 而不是 33.3% 来实现这一点，您必须使用

justify-content: end;

不是 justify-content: 之间的空格；

检查片段

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  list-style: none;
}

.container::after {
  content: '';
  flex: auto;
}

.item {
  flex: 0 0 30%;
}

<ul class="container">
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
</ul>