ねこのひたい

ねこのひたい ねこのひたい

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

css

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

<ul>
    <li>１番目の要素</li>
    <li>２番目の要素</li>
    <li>３番目の要素</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;
}

3列でそろえる場合、下の状態だと均等揃えだと5番目が右端にいってしまいきれいに並ばないので擬似要素を使うといい

サンプルはこちら 

<ul>
    <li>１番目の要素</li>
    <li>２番目の要素</li>
    <li>３番目の要素</li>
    <li>４番目の要素</li>
    <li>５番目の要素</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;
}

また4列の場合はさらに疑似要素を加え右揃えにできる。
5列は疑似要素が足りないので均等そろえ使うな！

サンプルはこちら 

<ul>
    <li>１番目の要素</li>
    <li>２番目の要素</li>
    <li>３番目の要素</li>
    <li>４番目の要素</li>
    <li>５番目の要素</li>
	<li>６番目の要素</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:before{
        content : "";
        display : block;
        width : 24%;
		order : 1;
}
ul:after{
        content : "";
        display : block;
        width : 24%;
}
ul li{
        width : 24%;
}
.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;
}