フレックスボックスで要素を均等に並べる

均等並びサンプルはこちら

<ul>
    <li>1番目の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
</ul> 
ul{
	position : relative;
	display : flex;
	display : -ms-flexbox; /* IE10 */
	display : -webkit-box; /* Android4.3以下、Safari3.1~6.0 */
	display : -webkit-flex; /* Safari6.1以降 */
	justify-content : space-between;
	-webkit-justify-content : space-between;  /* Safari etc. */
	-ms-justify-content : space-between;  /* IE10 */
}
ul li{
        width : 30%;
}
.smple_area ul li:nth-child(1){
        background : blue;
}
.smple_area ul li:nth-child(2){
        background : yellow;
}
.smple_area ul li:nth-child(3){
        background : red;
}



下の場合均等揃えだと4番目と5番目が両端にいってしまいきれいに並ばないので擬似要素を使うといい

サンプルはこちら

<ul>
    <li>1番目の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
    <li>5番目の要素</li>
</ul> 
ul{
	position : relative;
	display : flex;
	display : -ms-flexbox; /* IE10 */
	display : -webkit-box; /* Android4.3以下、Safari3.1~6.0 */
	display : -webkit-flex; /* Safari6.1以降 */
	flex-wrap : wrap;
	-webkit-flex-wrap : wrap; /* for old webkit browser */
	-ms-flex-wrap : wrap; /* for IE10 */
	justify-content : space-between;
	-webkit-justify-content : space-between;  /* Safari etc. */
	-ms-justify-content : space-between;  /* IE10 */
}
ul:after{
        content : "";
        display : block;
        width : 30%;
}
ul li{
        width : 30%;
}
.smple_area ul li:nth-child(1){
        background : blue;
}
.smple_area ul li:nth-child(2){
        background : yellow;
}
.smple_area ul li:nth-child(3){
        background : red;
}
.smple_area ul li:nth-child(4){
        background : green;
}
.smple_area ul li:nth-child(5){
        background : pink;
}