两端对齐

在Web布局中时常碰到两端对齐的需求。在Flexbox布局中，时常在Flex容器中显式设置justify-content的值：

.flex__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

但在末尾行，如果和前面行的个数不相同（Flex项目）就会出现下图这样的效果：

像上图这样的效果，并不是我们所需要的，因为我们希望在最后一行的Flex项目不足够排列满一行时，希望Flex项目一个紧挨一个的排列：

在Flexbox要实现上图这样的效果，只需要在Flex容器中添加一个伪元素：

.flex__container::after {
    content: "";
    display: flex;
    flex: 0 1 32vw;
}

注意，伪元素的flex-basis建议设置的和卡片的flex-basis（或宽度）等同。这个时候你将看到像下面这样的示例：

Demo(https://codepen.io/airen/embed/QWymaam)

不过这种方式也不是最佳的方式，当末尾行的个数不只少一个时，就会出现下图这样的效果：

面对这样的场景，我们需要给Flex容器添加额外的空标签元素：

占位符元素数量 = 每行最大的列数 - 2

// 4 * 4 --- 4 * 2 
function(list){
    return Math.ceil(list.length / 4) * 4 - list.length
}