Chap13-4で出題した練習問題の解答例は、2回に分けて紹介します。
・Chap14-4 「ご利用案内と料金について」
・Chap16-3 「営業時間・交通アクセス」
Chap16-3までに「営業時間・交通アクセス」を作成してみてください。
「display : flex ;」について、基本的な使い方から便利な使い方を学習します。
FlexBoxの細かい仕組みや設定を、復習しながら理解することが目的です。
まずは基本セットを確実にマスターし、その後でゆっくりとその他の設定や仕組みを覚えると良いでしょう。
Flexでできること
FlexBoxの仕組み
Flexアイテムが子要素、Flexコンテナが親要素です。
See the Pen 15-1 by Rayout-gw (@Rayout-gw) on CodePen.
コンテナが伸縮すると、アイテムも伸縮する
See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.
コンテナが縮んでも、アイテムは縮まない
See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.
See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.
逆向きに並べる
See the Pen 15-1-5 by Rayout-gw (@Rayout-gw) on CodePen.
複数段（行）でZ型に並ぶ
See the Pen 15-1-6 by Rayout-gw (@Rayout-gw) on CodePen.
縦方向で逆に並べる
See the Pen 15-1-7 by Rayout-gw (@Rayout-gw) on CodePen.
縦方向の複数段（行）に並べる
See the Pen 15-1-8 by Rayout-gw (@Rayout-gw) on CodePen.
アイテムの順序を変える
See the Pen 15-1-9 by Rayout-gw (@Rayout-gw) on CodePen.
次のページに続きますよ！