CSS弹性布局小技巧：每行元素两端对齐，不满一行的自动居左对齐~

当需要让多个元素横向布局时，我们第一个想到的可能就是先弹性布局，再让元素两端对齐；但这样也就会有一个问题，如果设置两端对齐，那么如果最后一行的元素不能占满一行，也会两端对齐，这样不美观而且与需求不符，如图1；

而其实想让前面的行两端对齐，不满一行的自动居左对齐也很简单，我用的是Sass，如果不满一行那么就在该元素的后面自动创建空的元素，使其占满这一行。具体操作就是在要排列的元素选择器的同级加以下代码：
&::after {
content: ''; //空元素
width: 2rem; //宽度与其他元素相同即可
}

效果如图2。