CSSフレックスボックス完全ガイド｜初心者でもすぐ使えるFlexboxコードテンプレート集

よく使うFlexboxのコードテンプレート集

先生と生徒の会話形式で理解しよう

生徒

「CSSのFlexboxって、毎回書き方を忘れてしまいます…」

先生

「よく使う形をテンプレートとして覚えると、とても楽になりますよ。」

生徒

「パソコンをあまり触ったことがなくても使えますか？」

先生

「大丈夫です。形をそのまま使えるように、順番に説明していきましょう。」

1. Flexboxのコードテンプレートを使う理由

Flexboxは、CSSでレイアウトを整えるための仕組みです。レイアウトとは、文字や箱をどこに並べるかを決めることです。

初心者のうちは、毎回ゼロから考えると混乱しがちです。そこで、よく使う形をテンプレートとして覚えると、コピーして少し直すだけで使えるようになります。

これは、料理のレシピを見ながら作るのと同じ感覚です。何度も使ううちに、自然と身についていきます。

2. 横並びにする基本テンプレート

Flexboxで一番よく使われるのが、横並びのレイアウトです。メニューやボタンを横に並べたいときによく使います。


<style>
	.flex-row {
	    display: flex;
	}
</style>

<div class="flex-row">
	<div>左</div>
	<div>中央</div>
	<div>右</div>
</div>

ブラウザ表示

displayは「表示方法」という意味です。 flexを指定すると、中の要素が横に並びます。

3. 中央にそろえるテンプレート

画面の中央に要素を配置したい場面はとても多いです。 Flexboxを使うと、難しい計算をしなくても中央にできます。


<style>
	.center-box {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 150px;
	    background: #eee;
	}
</style>

<div class="center-box">
	<div>中央</div>
</div>

ブラウザ表示

justify-contentは横方向の位置、 align-itemsは縦方向の位置を決める命令です。

4. 均等に間隔をあけるテンプレート

ボタンやメニューを等間隔で並べたいときもFlexboxが便利です。要素の数が変わっても、自動で調整されます。


<style>
	.space-box {
	    display: flex;
	    justify-content: space-between;
	}
</style>

<div class="space-box">
	<div>A</div>
	<div>B</div>
	<div>C</div>
</div>

ブラウザ表示

space-betweenは、両端をそろえて間を均等にします。ナビゲーションメニューでよく使われます。

5. 縦並びにするテンプレート

Flexboxは横だけでなく、縦に並べることもできます。スマートフォン画面のような縦配置で役立ちます。


<style>
	.flex-column {
	    display: flex;
	    flex-direction: column;
	}
</style>

<div class="flex-column">
	<div>上</div>
	<div>中</div>
	<div>下</div>
</div>

ブラウザ表示

flex-directionは並ぶ向きを指定します。 columnは縦方向という意味です。