4つのよくある場面を想定してCSS Flexboxの使い方を解説

今回はFlexboxをもっと効果的に活用してもらうべく、Flexboxが役立つ場面をいくつか紹介させていただきます。今まで別のCSSプロパティを使って作っていたけどFlexboxの方がより簡単にスピーディーに作れることがあるかもしれませんので、使えるものがあれば参考にしていただければ幸いです。

なお、Flexboxを使う際には全てのブラウザで問題なく表示できるようにベンダープレフィックス処理をする必要がありますが、今回の記事では省略しています。Autoprefixer CSS onlineこちらのサイトを使うとCSSを一発でベンダープレフィックス処理ができますので、実際に利用する際は処理を忘れないようにしましょう。

それでは早速見ていきましょう。

①画像を横並びにする



まずはよくある画像を横並びにする方法です。

今までのfloatプロパティでも十分対応は出来ていましたが、Flexboxを使った方がより簡単に、カスタマイズも楽にできるようになるかもしれません。

上のように3つの画像を並べる時は以下のようなソースコードを書きます。これが基本的なFlexboxの使い方です。

<div style="
display:flex; <!-- Flexboxを使う親要素(フレックスコンテナ)に指定する -->
justify-content: space-between; <!-- 両端から左右へ均等に配置する -->
align-items:center; <!-- 親要素から上下の中央に配置する -->
">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/03/004.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/02/002.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/02/001.jpg" width="30%">
</div>

justify-contentで横方向、align-itemsで縦方向のどの位置に子要素(フレックスアイテム)を配置するかを指定します。

②画像をギャラリー状に並べる

Flexboxではただ子要素(フレックスアイテム)を横並びにするだけではなく、折り返して要素を並べることもできます。要素を折り返す際はflex-wrapプロパティを使います。

<style type="text/css">
.gallery-container{
	display: flex; <!-- Flexboxを使う親要素(フレックスコンテナ)に指定する -->
	justify-content: space-between; <!-- 両端から左右へ均等に配置する -->
	align-items: center; <!-- 親要素から上下の中央に配置する -->
	flex-wrap:wrap; <!-- 要素を折り返すようにする -->
}

.gallery-container img{
margin: 10px;
}
</style>

<div class="gallery-container">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/03/004.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/02/002.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/02/001.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/03/005.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/03/006.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/03/007.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/03/008.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/03/009.jpg" width="30%">
	<img src="https://web-firstlog.com/wp-content/uploads/2018/03/010.jpg" width="30%">
</div>

先ほどの①で紹介したソースコードにflex-wrap:wrap;を追加して画像を9個に増やしただけですが、これで画像がギャラリー状に配置されるようになりました。

flex-wrapプロパティの値をwrapにすることで、子要素の横幅が100%を超える場合はそれ以降を次の行に折り返すようになります。

flex-wrapプロパティを付けるだけでこのようなレイアウトの変更ができるので簡単ですね!

③文字を上下中央に配置する

文字を上下左右
中央に配置する

次は意外と難しかったりする親要素の中のテキストを上下左右中央に配置する方法です。

左右の中央揃えはtext-alignプロパティで簡単に出来るのですが、上下の中央揃えはvertical-alignプロパティやline-heightプロパティやpositionプロパティで調整するケースが多いかもしれません。しかしそれだとインライン要素でないと使えなかったり複数行になると使えなかったりと規制が多くてやりにくさがあったのですが、Flexboxを使えば一発で解決します。

上のように文字を上下左右中央に配置するには以下のようなソースコードで実装出来ます。

<div style="
display: flex; <!-- Flexboxを使う親要素(フレックスコンテナ)に指定する -->
justify-content: center; <!-- 左右の中央に子要素(フレックスアイテム)を配置する -->
align-items: center; <!-- 上下の中央に子要素(フレックスアイテム)を配置する -->
height: 300px; <!-- 親要素(フレックスコンテナ)の高さ -->
background: #ccc; <!-- 親要素(フレックスコンテナ)の背景色 -->
">
	<p>
		文字を上下左右<br>中央に配置する
	</p>
</div>

justify-contentプロパティとalign-itemsプロパティにcenterという値を付けることによって、子要素(フレックスアイテム)を上下左右の中央に配置することができます。

④メニューを作る

最後は①と③のやり方を使って、文字を上下左右中央に揃えたメニューを作ってみましょう。

上のようにメニューを作るには以下のソースコードを参考にしてください。

<head>
<style type="text/css">
	.menu-container{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.menu-container p{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		background: #ccc;
		height: 100px;
		border: 1px solid #333;
		box-sizing: border-box;
	}
</style>
</head>

<div class="menu-container">
	<p>
		サンプル<br>メニュー1
	</p>
	<p>
		サンプル<br>メニュー2
	</p>
	<p>
		サンプル<br>メニュー3
	</p>
	<p>
		サンプル<br>メニュー4
	</p>
	<p>
		サンプル<br>メニュー5
	</p>
</div>

ソースコードをご覧になって頂ければお分かりになるかと思いますが、Flexboxの中でさらにFlexboxを使うことも可能です。今回の場合でしたら親要素のdivにFlexboxを使い、さらにその子要素のpタグにもFlexboxを使っていることになります。

こうすることで、メニューとなるpタグを綺麗に横に並べて、なおかつpタグの中の文字を上下左右中央に持ってくることができました。

まとめ

今回はFlexboxが必要になる場面を4つ想定して紹介させていただきましたがいかがでしたでしょうか?

このような場面以外にもFlexboxを使って便利になる場面はたくさんあると思いますので、うまく活用して自由に使いこなせるようになりましょう。

関連記事