[随笔] flex 布局使用 space-between 尾行排版效果优化

问题：有7个元素，需要排列成两行，整体要求两端对齐，尾行不足需向左对齐排列。

• 七个元素：

<ul class="the-ul" style="max-width:760px;">
      <li>我是子元素</li>
      <li>我是子元素</li>
      <li>我是子元素</li>
      <li>我是子元素</li>
      <li>我是子元素</li>
      <li>我是子元素</li>
      <li>我是子元素</li>
</ul>

• CSS效果：

.the-ul {
  display: block;
  margin: 0 auto;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.the-ul > li {
  display: inline-block;
  width: 180px;
  font-size: 18px;
  font-weight: 400;
  color: #2F2F2F;
  line-height: 48px;
  text-align: left;
}
/* 重写点样式↓ */
.the-ul > li::before {
  display: inline-block;
  content: "●"; /* '\25CF' */
  padding-right: 10px;
  color: #ccc;
  font-size: 10px;
}

使用 space-between 效果和预期会有区别

由于space-between就是两端布局，当最后一行不满四个的时候，会分布在两端。
解决方案：使用 ::after 伪元素(width属性值为子元素宽度)

• 添加 CSS 代码控制

.the-ul::after {
  content: '';
  width: 180px;
}

• 效果
  

---

• 解决方法参考
  https://blog.csdn.net/m_review/article/details/83311698