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

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;
}
我们改善一下为这样就可以解决对齐问题了。

