【CSS】flex-flowを使ってフレックスボックスを簡潔に記述しよう!

flex-flowを使ってフレックスボックスを簡潔に記述しよう!

htmlやcssでコーディングする際、フレックスボックスというレイアウトの方法を使う機会が多いかと思います。

フレックスボックスはさまざまな便利なオプションを使用することができますよね。

しかしオプションが多すぎるあまり、

「flex-flowって聞いたことあるけど何ができるの?」
「フレックスボックスのcssを簡潔に記述したい」

このように悩む方もいらっしゃるのではないでしょうか。

そこで今回は、フレックスボックスのオプションのひとつである「flex-flow」

・基本的な使い方
・「flex-direction」との違い

などを解説します。

flex-flowとは

flex-flowの読み方

flex-flowは「フレックスフロー」と読み、フレックスボックスの「流れ」や「流動」といったことを意味します。

読み方だけ見ても、イマイチどういった使い方をするのかピンときませんね。

これから、詳しく解説していきます。

flex-flowの説明

「flex-flow」は、「flex-direction」と「flex-wrap」の2つのプロパティを一括にまとめることができるプロパティです。

たとえば、

このような記述があった場合、以下のように書き換えることができます。

非常に簡潔になりましたね。

このように便利なだけでなく、cssもすっきりと簡潔に書くことができますので、この機会にぜひマスターしましょう!

flex-flowで利用できる値

flex-flowでは以下の値を使うことができます。

説明
flex-directionの値 「row(初期値)」「row-reverse」「column」「column-reverse」
flex-wrapの値 「nowrap(初期値)」「wrap」「wrap-reverse」

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
nternet Explorer 完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

flex-flowの基本的な使い方

flex-flowの使い方

それでは「flex-flow」の使い方を具体的に解説します。
以下のように、headerに対して半分の幅をもった4つのボックスを用意しました。まずは、これらのボックスをフレックスボックスを使ってレイアウトを変更してみましょう。

flex-flowの解説

「flex-direction」の値は「row」、「flex-wrap」の値は「wrap」で指定してみましょう。

flex-flowの解説

キレイに横並びになり、折り返されていることがわかりますね。それでは次に、「flex-flow」を使って、先ほどのコードを書き換えてみましょう。

flex-flowの解説

書き換えても、きちんと同じ結果を得ることができましたね。念のため、ほかの値も見てみましょう。

flex-flowの解説

「flex-wrap」の値を「nowrap」に変更したため、折り返しがなくなり、横にキレイに並んでいますね。

このように、「flex-flow」は簡単に使うことができ、コードも簡潔にすることができるプロパティとなっています。

MEMO
「flex-flow」は、フレックスボックスの親要素である「フレックスコンテナ」に指定します。子要素である「フレックスアイテム」に指定しても反応しませんので、合わせて覚えておきましょう。

flex-flowと類似する要素との違い

これまで解説してきた通り、「flex-flow」は、

・flex-direction
・flex-wrap

この2つのプロパティの値のみ有効なものになります。ほかのプロパティとごちゃごちゃになって間違った値を入れてしまわないように注意しましょう。

flex-flowの応用的な使い方

先ほどのサンプルコードを用いて、ほかの値も見ていきましょう。

flex-flowの解説

「flex-direction」の値に「row-reverse」を使うことで、「横並びの逆方向」にレイアウトを変えることができます。

flex-flowの解説

「column-reverse」を使うと、「縦並びの逆方向」を再現することができます。フレックスボックスを使うと、色々なレイアウトを実装できて非常に便利ですね。

まとめ

いかがでしたか?

今回は、「flex-flowの使い方」を解説してきました。

ぜひ参考にしていただいて、コードをすっきりと簡潔にし、効率よくコーディングしてみてくださいね。

最後まで読んでいただきありがとうございました。

参考文献:MDN web docs|flex-flow

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング