css space-between最后一排对齐方式的解决方法

1、打开sublime text3编辑器，创建一个HTML文档，并且设置基本框架。

2、新建一个CSS文件，并且与HTML文档相关联。

<link rel="stylesheet" type="text/css" href="index.css">

3、比如说我们按要求要设置5个区域。

.box {

    width: 100px;

    height: 100px;

    background-color: gold;

}

4、这里我们先加一下空隙。

margin-bottom: 10px;

这样可以区分他们。

5、.father {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

}

然后我们让他们自动布局对齐，但是下面有一个镂空的BUG出现。

6、.father:after {

    content: "";

    width: auto;

}

这里我们用after元素进行设置，但是对齐不是很好看。

7、.father:after {

    content: "";

    display: block;

    width: 100px;

    height: 100px;

}

我们改善一下为这样就可以解决对齐问题了。