flex-flow一括指定プロパティを使う - CSSのチュートリアル

このレッスンでは flex-flow一括指定プロパティというものを ご紹介します。 今開いてるこのページなんですが、 親のdiv要素に対して フレックスボックスの指定をしてあります。 けれどもボックス、要素数が多いために はみ出してしまっていますね。 これは flex-wrap の プロパティの設定をしていないからです。 改行するためには flex-wrap のプロパティに wrap を指定すればいいので その指定を加えてみましょう。 親のdiv要素、 class box に対して display flex ということで フレックスボックスの指定が してありますけれども、 wrap を指定しないと nowrap、デフォルト値ですね。 ということで、はみ出てしまいますので、 ここで flex-wrap と。 ここに wrap の指定をします。 もうひとつ、direction も設定しましょう。 flex-direction ということで ここで、では reverse にしましょうか。 row-reverse と。 そうすると主軸、row の方向が 右から左に変わります。 反対方向ですね。 ですから wrap も反対にしましょうか。 改行を下から上ということで wrap-reverse というふうにしてみます。 これで確認しましょう。 ファイルを保存します。 ボックスが改行して配置されました。 ただし主軸の方向ですね、 これが右から左になっていて 改行、wrap の方向も reverse にしましたから 下から上に 改行しているというふうになっていますね。 さてこの flex-direction と flex-wrap、 この2つは 組み合わせて使うことが多いんですね。 ですからこの2つを いっぺんに指定できるのが この flex-flow というプロパティです。 一括指定できるんですね。 では試してみましょう。 これはいったんコメントアウトします。 コメントにしまして、2行ともですね。 この2つを flex-flow で 指定することにしましょう。 flex-flow、 そして2つの指定なんですが、 まず最初が flex-direction の 指定になります。 ここでそれでは column としましょう。 2つ目が今度は wrap なんですけれども wrap…