使用 Flexbox 将最后一行元素居中

Question

当我将窗口大小调整为较小的分辨率时，我希望最后一个元素居中。我知道我可以通过将 parent 的justify-content参数设置为space-aroundor来实现这一点center，但必须将其设置为: space-between。

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgba(255, 0, 0, 0.3);
  padding: 0;
}
li {
  list-style-type: none;
  display: inline-block;
  min-width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

http://jsfiddle.net/k7fzdn80/

Answer 1

使用自动保证金

margin: 10px auto;

这是你期望的吗？ 解决方案