flexbox[CSS3]で実践的なレイアウトを。実際の現場で使う4つのパターン

flexboxを使いたいけど、たくさんのプロパティがあって実際に使用するにはしっかり勉強しないと実装は難しいものであったりします。でも、実際の現場で使用するプロパティはある程度限られているので、ポイントだけ覚えておけば実装は可能なのです。

そこで、実際の現場であろう実践的なレイアウトを4パターン、flexboxを使用してご紹介します。コピペで実装可能ですので「flexbox使ってみたいけど難しいからな…。」と踏みとどまっていた方はぜひ参考にしてみてください。

flexbox用に実際に使用する際に覚えておくべきプロパティは7つ

flexboxのプロパティを覚えるとなると、数が多すぎて覚えるのも大変です。ただ、実際にWebサイトにflexboxを使用する時に必要なプロパティは、7つ覚えておけば大丈夫。

display: flex;: flexboxを適用するためのベースとなるプロパティ。これを親要素に設定すると、その子要素がflexアイテムとなります。このflexアイテムに対してさまざまなプロパティを指定することでレイアウトを変えることができます。

flex-wrap: wrap;: flexアイテムに何も指定しないと横一列に並ぶだけになります。このプロパティを指定してflexアイテムに横幅等のプロパティを指定すると、必要があれば下の行に回り込むようになります。ブログ記事の一覧などにはこのプロパティは必須です。

justify-content: flex-end;: 横並びしているflexアイテムを右寄せに配置するプロパティ。ヘッダー等でナビゲーションを右側に配置したい時に使用します。これまではfloat: right;を使用して実装してましたが他のプロパティも必要になります。でも、flex-endを使用すればこれだけで適用されます。

justify-content: space-between;: 横並びになっているflexアイテムを等間隔で配置してくれるプロパティ。これまでは、margin-rightなどで横にマージンを入れておいて行の最後の要素にnth-childなどでマージンを消していたのですが、このプロパティを使えば1行だけで完結します。

flex-direction: row-reverse;: 列の並び順を右→左と逆にするプロパティ。使用機会は少ないかもしれませんが、この記事でご紹介しているDEMO4のように、画像を左右交互に配置したい時にかなり手間を省くことができます。

align-items: center;: flexアイテムの垂直方向の指定をするalign-items 。centerを指定することで上下中央に配置されます。ロゴに合わせてナビゲーションを垂直方向に中央寄せしたい場合に使用します。実はこの要素も、align-items: center;を指定して中央寄せに配置してます。

flex-direction: column;: このプロパティは、今回スマホ用に使用しました。一覧表示で横に配置していたものを縦一列にする際に便利です。

これらを覚えておけば、flexboxを実装できます。

ブラウザ毎にバグがあるようですが、上のプロパティではバグは見受けられませんでした。すべてのバージョンで確認したわけではないのでご注意ください。また、もし他のプロパティも追記して使用される場合には都度表示確認をした方がいいと思います。

flexboxを実際の現場で使える4パターン

先述した7つのflexboxプロパティを使用して、実際にレイアウトを作っていきます。よくあるレイアウトとして4パターンご用意しました。実際の表示を確認できるようにデモページもございますので、そちらも参考にしてみてください。

flexboxをヘッダーレイアウトに使用する

flexboxでヘッダーでよくあるロゴとナビゲーションの横並びを実装します。

デモページ

<header class="header">
	<h1><img src="https://web-bruno.com/wp-content/themes/bruno/images/logo_b.png" alt="Bruno"></h1>
	<nav>
		<ul>
			<li>サービス案内</li>
			<li>料金プラン</li>
			<li>実績</li>
			<li>よくある質問</li>
			<li>お問い合わせ</li>
		</ul>
	</nav>
</header>

HTMLは一般的なもので大丈夫です。余計なタグは不要ですが、横並びさせる子要素を囲うように親要素<header class="header">〜</header>をマークアップすることを忘れないようにしてください。また、<ul>〜</ul>も親要素として使用します。

.header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.header h1 {
	margin-right: auto;
}

.header ul {
	display: flex;
}

.header li {
	margin-left: 3rem;
}

@media screen and (max-width: 768px){
	.header {
		flex-direction: column;
	}

	.header h1 {
		margin: 0 auto 3rem;
	}

	.header li {
		margin: 0 1rem;
	}
}

@media screen and (max-width: 568px){
	.header li {
		margin: 0 .5rem;
		font-size: 1.2rem;
	}
}

flexboxを指定しているのが、.headerと、.header ulの2つ。これらの子要素がflexアイテムにすることで、横並びに表示されるようにしております。また、justify-content: flex-end;で親要素の右寄せで配置し、.header h1で指定したmargin-right: auto;によって、ロゴを左寄りに配置することができます。

@media screen and (max-width: 768px){より下の部分は、スマホ用に記述しておきました。flex-direction: column;でロゴとナビゲーションを縦並びにすることができます。

ただ、flexboxを.header ulに直接指定しているので、ナビゲーション部分は横並びのままになってます。ナビゲーションの数やテキスト数によっては改行されたりしてうまく表示されない場合があります。スマホにはハンバーガーメニューといった別のメニューを実装した方がスマートに表示できると思います。

flexboxで要素を2列レイアウトにする

flexboxは、一覧表示の要素をレイアウトする際に特に使いたいものであったりします。2列レイアウトもヘッダーの時と同様にとても簡単に実装できるのです。

デモページ

<div class="contents-wrap">
	<div class="contents-box">
		<img src="images/sample-image01.jpg" alt="flexbox">
		<h2>flexboxのメリット</h2>
		<p>flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。</p>
	</div>

	<div class="contents-box">
		<img src="images/sample-image02.jpg" alt="flexbox">
		<h2>flexboxのメリット</h2>
		<p>flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これからはflexbox があるから大丈夫！簡単に実装できますよ。</p>
	</div>

	<div class="contents-box">
		<img src="images/sample-image03.jpg" alt="flexbox">
		<h2>flexboxのメリット</h2>
		<p>flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。簡単に実装できますよ。</p>
	</div>

	<div class="contents-box">
		<img src="images/sample-image04.jpg" alt="flexbox">
		<h2>flexboxのメリット</h2>
		<p>flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。</p>
	</div>
</div>

これも一般的なHTMLです。こちらも同様に<div class="contents-box"> 〜 </div>が親要素となり、<div class="contents-box"> 〜 </div>を子要素としてレイアウトしていきます。

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

.contents-box {
	margin-bottom: 3rem;
	padding: 3rem;
	width: 49%;
	background-color: #f0f0f0;
}

.contents-box img {
	display: block;
	margin-bottom: 3rem;
	width: 100%;
	height: auto;
}

.contents-box h2 {
	margin-bottom: 2rem;
	font-size: 2.2rem;
	text-align: center;
}

@media screen and (max-width: 768px){
	.contents-wrap {
		flex-direction: column;
	}

	.contents-box {
		width: 100%;
	}
}

flex-wrap: wrap;とwidth: 49%;で2列の横並びとなり、3つ目の要素以降を下に配置しております。また、width: 49%;とjustify-content: space-between;で、要素を親要素の左右端に配置して自動的に2%の余白を作ってます（100% – (49% x 2)=2%）。

flexboxで要素を3列レイアウトにする

これは先述した2列レイアウトとほぼ同じです。先述した2列のCSS内にある.contents-boxの要素の横幅を変えるだけで実装できます。これらのレイアウトは使用する機会が多いので、かなり手間を省くことができますね。

デモページ

.contents-box {
	margin-bottom: 3rem;
	padding: 3rem;
	width: 32%;
	background-color: #f0f0f0;
}

flexboxで画像を左右交互に配置する

子要素の画像を左右交互に配置するケースって何気にあると思います。各セクション毎にコンテンツを流し読みではなくしっかり読んで欲しい場合によく使用しますね。

デモページ

<div class="contents-wrap">
	<div class="contents-img">
		<img src="images/sample-image01.jpg" alt="">
	</div>
	<div class="contents-text">
		<h2>flexboxのメリット</h2>
		<p>flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。</p>
	</div>
</div>

<div class="contents-wrap">
	<div class="contents-img">
		<img src="images/sample-image02.jpg" alt="">
	</div>
	<div class="contents-text">
		<h2>flexboxのメリット</h2>
		<p>flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。</p>
	</div>
</div>

<div class="contents-wrap">
	<div class="contents-img">
		<img src="images/sample-image03.jpg" alt="">
	</div>
	<div class="contents-text">
		<h2>flexboxのメリット</h2>
		<p>flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。</p>
	</div>
</div>

<div class="contents-wrap">
	<div class="contents-img">
		<img src="images/sample-image04.jpg" alt="">
	</div>
	<div class="contents-text">
		<h2>flexboxのメリット</h2>
		<p>flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。</p>
	</div>
</div>

先程のものと違うところは、セクション毎に親要素を記述するというところです<div class="contents-wrap"> 〜 </div>。

.contents-wrap {
	display: flex;
	justify-content: space-between;
	margin-bottom: 7rem;
}
.contents-wrap:nth-child(odd) {
	flex-direction: row-reverse;
}

.contents-text {
	width: 60%; /*flex: 2;*/
}
.contents-img {
	width: 35%; /*flex: 1;*/
}

.contents-text h2 {
	margin-bottom: 2rem;
	font-size: 2.2rem;
}

.contents-img img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px){
	.contents-wrap,
	.contents-wrap:nth-child(odd)  {
		flex-direction: column;
	}

	.contents-text,
	.contents-img {
		width: 100%; /*flex: 1;*/
	}

	.contents-text {
		padding: 3rem;
	}

	.contents-text h2 {
		text-align: center;
	}
}

各セクションごとにflexboxを指定することで画像とテキストが横並びになるとともに、.contents-wrap:nth-child(odd) {で、セクションの偶数要素の画像とテキストの配置を切り替えています。デモの場合、2個目と4個目の画像が右側に配置されていますね。