CSSで要素を横並びに!フレックスボックス(display:flex)の使い方

CSS

CSSで要素を横並びにするにはいくつかの方法があります。

floatを使う方法、display:inline-block、display:flexなどがありますね。

ただ、floatの場合うしろの回り込みを解除しないといけなかったり、inline-blockだと余計な余白ができて面倒だったりします。

なので、今回は使いやすくて融通が利くdisplay:flexについて解説していきます。

フレックスボックスの基本

ある要素にdisplay: flex;を指定すると、その直下の子要素が全て並列になります。

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
ul {
	display: flex;
}

横方向の揃え方

justify-contentで指定します。

初期値はjustify-content: flex-start;となっており、左寄せで表示されます。

中央寄せ

ul {
	display: flex;
	justify-content: center;
}

右寄せ

ul {
	display: flex;
	justify-content: flex-end;
}

要素間の余白が等しくなる

ul {
	display: flex;
	justify-content: space-between;
}

各要素の左右の余白が等しくなる

ul {
	display: flex;
	justify-content: space-around;
}

要素の並び順を逆にする

flex-direction: row-reverse;を使います(初期値はflex-direction: row;)。

ul {
	display: flex;
	flex-direction: row-reverse;
}

この場合に左寄せするならjustify-content: flex-end;になります。

縦方向の揃え方

align-itemsで指定します。

初期値はalign-items: normal;で、上端に合わせて配置されます。

初期状態

ul {
	display: flex;
}

中央揃え

ul {
	display: flex;
	align-items: center;
}

下揃え

ul {
	display: flex;
	align-items: flex-end;
}

親要素からあふれた要素を改行して下に表示させる

flex-wrap: wrap;を使い、改行を有効にします。

※初期値はflex-wrap: nowrap;

ul {
	display: flex;
	flex-wrap: wrap;
}

要素を親要素いっぱいに伸ばす

flex-growを使います。

flex-growには、指定した要素を親要素の幅を満たすように伸ばすはたらきがあります。

初期状態

ul {
	display: flex;
}

全ての要素を均等に伸ばす

全ての要素のflex-growを1にすることで、均等に伸ばすことができます。

ul {
	display: flex;
}

li {
	flex-grow: 1;
}

いろいろな比率で伸ばす

異なった比率で伸ばしてみます。

ul {
	display: flex;
}

li:first-child {
	flex-grow: 1;
}

li:nth-child(2) {
	flex-grow: 2;
}

width・marginで細かく調整

フレックスアイテムは普通にwidthやmarginでデザインの調整ができます。

↓改行を有効にして、それぞれ要素の間に10pxの余白がつくようにしてみました。

ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

li:first-child {
	width: 100%;
	margin-bottom: 10px;
}

li:nth-child(2) {
	width: calc(50% - 5px);
}

li:nth-child(3) {
	width: calc(50% - 5px);
}