当“justify-content”设置为“space-between”时，如何左对齐最后的flex项？

Question

In this JSfiddle，最后一行的最后两项是合理的。相反，我希望它们与左对齐。

怎么做？

ul,
li {
  list-style: none;
}

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

li {
  width: 30%;
  height: 80px;
  background: red;
  margin-bottom: 30px;
}

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

Answer 1

如果margin位于该行的第二位，您可以重置last-child：

li:nth-child(3n + 2):last-child {
  margin-right:auto;
  margin-left:5%;
}

https://jsfiddle.net/9L72e7t1/1/

ul, li {
  list-style: none;
}
ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
li {
    width: 30%;
    height: 10px;
    background: red;
    margin-bottom: 30px;
}

li:nth-child(3n + 2):last-child {
  margin-right:auto;
  margin-left:5%;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<hr/> if last is not on second position, don't bother
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 2

希望这可行，

＆＃13;

＆＃13;

ul, li {
  list-style: none;
}
ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
li {
    width: 30%;
    height: 80px;
    background: red;
    margin-bottom: 30px;
    margin-right: 10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;