flex 实现三栏等分且超出自动换行的多行布局（含最后一行子元素为两个时，左对齐和两端对齐两种方案）

本文主要采用flex布局方式，实现容器内三栏布局的同时，还能够做到容器内子元素超过3个时，自动换行，且后边的每一行一样都是三栏等分排列

HTML

<ul>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
	<li>子元素</li>
</ul>

CSS

ul {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
li {
	width: 32%;
	height: 60px;
	border: 1px solid #ccc;
	margin-top: 10px;
}

最终效果

补充：
当ul的justify-content为space-between，且最后一行子元素有两个时，他们会出现两端对齐的效果，如下：

而不是如下我们可能想要的效果：

这时就要对样式进行一些调整，调整后的代码如下“

CSS

ul {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start; // 调整项
}
li {
	width: 32%;
	height: 60px;
	border: 1px solid #ccc;
	margin-top: 10px;
	margin-right: 2%; // 调整项
}
// 调整项
li:nth-child(3n) {
 	margin-right: 0;
}

这样，就可以完美实现左对齐自动换行效果了。