BLOG

ブログ

programming

2018.08.20

フレキシブルボックス（フレックスボックス）で横並びのレイアウト

こんにちは、ティウェブ藤園です。

今日は、CSSでのレイアウト方法のひとつである
「フレキシブルボックス（フレックスボックス）」についてご紹介します。

以前から利用は可能でしたが、IE10以前が非対応（厳密にはIE10は対応していましたが書き方が少し異なるのでややこしい）で、なかなか実用にはいたりませんでした。
（※IE：Internet Explorer）

しかし、ようやく弊社でもIEは11のみの対応とする案件が増え、その他の現行のモダンブラウザでも問題ないことから、実用に踏み切りました。

■display: flex;

フレキシブルボックスの利用はとっても簡単で、横並びにしたい要素の親要素にdisplay: flex;と指定することで、その子要素が横並びになります。

<ul class="md_flex">
<li>あいうえお<br>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

.md_flex {
	border: 1px solid #333;
	display: flex;
	max-width: 680px;
	margin: 15px auto;
	padding: 30px;
}
.md_flex li {
	background: #ccc;
	border: 2px solid #fff;
	padding: 10px;
}

あいうえお
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

フレキシブルボックスに関わるプロパティはたくさんあるのですが、
今回は、よく使う3つのプロパティについて説明します。

■align-items

このプロパティをcenterで先ほどのサンプルに追加してみます。

<ul class="md_flex2">
<li>あいうえお<br>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

.md_flex2 {
	align-items: center;
	border: 1px solid #333;
	display: flex;
	max-width: 680px;
	margin: 15px auto;
	padding: 30px;
}
.md_flex2 li {
	background: #ccc;
	border: 2px solid #fff;
	padding: 10px;
}

あいうえお
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

すると、縦の並びが中央ぞろえになります。

こういった縦の並びを指定するのがalign-itemsです。
このプロパティはフレキシブルボックス専用のもので、初期値としてstretchが指定されています。
stretchだと背景色は終わりもそろっていて気持ちいいのですが、文字自体は上でそろっている状態なので、stretchを使うかcenterを使うかは背景色の有無など状況に応じて使い分けるのがよいと思います。

その他にも、上揃えのflex-start、下揃えのflex-endなどがあります。

■justify-content

このプロパティをcenterで先ほどのサンプルに追加してみます。

<ul class="md_flex3">
<li>あいうえお<br>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

.md_flex3 {
	border: 1px solid #333;
	display: flex;
	justify-content: center;
	max-width: 680px;
	margin: 15px auto;
	padding: 30px;
}
.md_flex3 li {
	background: #ccc;
	border: 2px solid #fff;
	padding: 10px;
}

あいうえお
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

すると、今度は横の並びが中央ぞろえになります。

縦の並びを指定するのがalign-itemsに対して、横の並びを指定するのがjustify-contentです。
他には、始端寄せ（左寄せ）のflex-start、終端寄せ（右寄せ）のflex-endなどがありますが、なかでも便利なのはspace-betweenです。
space-betweenは、最初の要素が始端（左端）に、最後の要素が終端（右端）に移動し、その間の要素が均等配置されます。

<ul class="md_flex4">
<li>あいうえお<br>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの均等配置用</li>
</ul>

.md_flex4 {
	border: 1px solid #333;
	display: flex;
	justify-content: space-between;
	max-width: 680px;
	margin: 15px auto;
	padding: 30px;
}
.md_flex4 li {
	background: #ccc;
	border: 2px solid #fff;
	padding: 10px;
}

あいうえお
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの均等配置用

こういった均等配置のメニュー、とっても多いですよね。

PhotoshopやIllustratorなど、デザインツールで作る分には簡単なのですが、いざコーディングをするとなると、余白がぜんぶ違うので、marginやpaddingを使った一括の設定ができない均等配置はかなりわずらわしいものでした。

しかし、フレキシブルボックスならこの通りです。

■flex-wrap

最後に、レスポンシブ対応にあたって重要なこのプロパティです。

スマートフォンなど横幅の狭い環境でご覧の方はお気づきかと思いますが、このフレキシブルボックスは、デフォルトだと子要素がカラム落ちしてくれません。内の文字を改行させて無理やりにでも横に全て並べます。
（こういった性質はtableによく似ていますね）

横幅が狭い環境からも見やすくするには、上のサンプルのように5カラムではなく、2カラムでカラム落ちしてもらわないといけません。

「子要素自体のwidthを50%指定すればいいのでは……？」と思われるかもしれませんが、table内のtable-cellに横幅を指定しても改行されないように、フレキシブルボックスも改行されないのです。

ですが、親要素にflex-wrapをwrapと指定し、合わせて子要素自体のwidthを50%とすることで、２カラムのリストにすることができます。

<ul class="md_flex5">
<li>あいうえお<br>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
</ul>

.md_flex5 {
	border: 1px solid #333;
	display: flex;
	flex-wrap: wrap;
	max-width: 680px;
	margin: 15px auto;
	padding: 30px;
}
.md_flex5 li {
	background: #ccc;
	border: 2px solid #fff;
	box-sizing: border-box;
	width: 50%;
	padding: 10px;
}

あいうえお
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの

tableと違ってtrを追加したりせずに改行できるのがとても便利ですね。

■まとめ

フレキシブルボックスがあれば、floatやtableなどを使ってリストやナビゲーションを横並びにする必要がなく、加えてfloatについてまわるclearの問題など、ややこしさが一切ありません。

IE10以前に対応できないということが欠点ではありますが、要件に問題がなければぜひお試しください ☺