flex 布局最后一行左对齐

flex 布局实现两端对齐很容易,如果只有一行内容倒也无所谓,但多行就不一样了,最后一行很可能只有少量内容,但还是两端对齐了。这与我们认知中的文档排版不一样。

掘金上这篇文字(如何实现CSS中flex布局最后一行左对齐? – 掘金 (juejin.cn))评论区有一个较好的解决方案:

.container::after {
  content: '';
  display: block;
  flex: 1 1 auto;
}

效果如下:

这与一般认知中的多行排版就一致了。