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;
}

最终效果