flex-directionとflex-wrapを一括で指定できるflex-flowを解説

本記事では、flex-directionとflex-wrapを一括で指定できるflex-flowプロパティについて解説していきます。

この記事を読むことで、

「flex-flowってすごい便利!」

「flex-directionとflex-wrapの値を1行で書けるなんて知らなかった!」

と感じるはずです。

ぜひ最後までご覧ください。

flex-flowで出来ること

flex-flowはflex-directionとflex-wrapを1行で書くことができます。

flex-flowの書き方は以下のようになります。

flex-flow: flex-directionの値 flex-wrapの値;

flex-flowの初期値はrow nowrapになります。

flex-directionは、rowとrow-reverse、column、column-reverseの4種類。

flex-wrapは、wrapとnowrap、wrap-reverseの3種類。

flex-flowを用いることで、flex-directionの値とflex-wrapの値を組み合わせたものをサンプルコードと合わせて見ていきましょう。

flex-flow: row nowrap;

flex-flow: row nowrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row;

flex-wrap: nowrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: row wrap;

flex-flow: row wrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row;

flex-wrap: wrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: row wrap-reverse;

flex-flow: row wrap-reverse;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row;

flex-wrap: wrap-reverse;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: row-reverse nowrap;

flex-flow: row-reverse nowrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row-reverse;

flex-wrap: nowrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: row-reverse wrap;

flex-flow: row-reverse wrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row-reverse;

flex-wrap: wrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: row-reverse wrap-reverse;

flex-flow: row-reverse wrap-reverse;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: row-reverse;

flex-wrap: wrap-reverse;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: column nowrap;

flex-flow: column nowrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column;

flex-wrap: nowrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: column wrap;

flex-flow: column wrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column;

flex-wrap: wrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: column wrap-reverse;

flex-flow: column wrap-reverse;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column;

flex-wrap: wrap-reverse;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: column-reverse nowrap;

flex-flow: column-reverse nowrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column-reverse;

flex-wrap: nowrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: column-reverse wrap;

flex-flow: column-reverse wrap;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column-reverse;

flex-wrap: wrap;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

flex-flow: column-reverse wrap-reverse;

flex-flow: column-reverse wrap-reverse;を親要素に書くと、上の画像のような結果になります。

flex-flow: flex-directionの値 flex-wrapの値;

という形に当てはめると、

flex-direction: column-reverse;

flex-wrap: wrap-reverse;

と同義になります。

flex-flowを用いて上の画像を再現したい人は、以下のサンプルコードを模写してみてください。

まとめ

いかがだったでしょうか?

flex-flowについて理解できたでしょうか?

flex-flowを使いこなすためには、まずflex-directionとflex-wrapを理解する必要があります。

flex-directionとflex-wrapを使いこなせるようになってから、flex-flowを使ってみてください。

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