flex布局实现满足一行两边对齐，不足一行靠左对齐

话不多说，上代码：

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

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

上面的代码中，.container 是包含 Flex 项目的容器元素。通过将 justify-content 属性设置为 space-between，项目会在一行中两边对齐。通过设置 flex-wrap 属性为 wrap，使得项目能够换行。

然后，使用伪元素 :after 在容器末尾创建一个弹性项目，并将其设置为 flex: auto。这样，在项目不足一行时，该弹性项目会占据剩余的空间，从而使项目靠左对齐。