レイアウトで遊んでみよう 課題2 Flexbox入れ子レイアウト

課題2 「Flexbox入れ子レイアウト」

課題2では、Flexboxを使ってサイトのヘッダーなどでよく見られるレイアウトを実現しましょう。
実はFlexboxは入れ子にすることができ、それを応用して複雑なレイアウトを作ることができます。
また今回はCSSウィンドウへのコーデイングのみで完結させることができます。

完成図は以下です。

完成図

以下のウィンドウ右上の「EDIT ON CODEPEN」をクリックしてページを開き、PenをForkして保存し、
上記「Flexbox入れ子レイアウト ルール説明」「ヒント」を参考に課題を行い提出しましょう。

See the Pen コーディング応用:Flexbox入れ子レイアウト by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

Flexbox入れ子レイアウト コーディング手順説明

今回は以下の手順で完成図の状態を実装することができます。

1. CSSウィンドウでセレクタ「#header」に対してdisplayプロパティを使い、#headerをFlexboxにする。
2. CSSウィンドウでセレクタ「#header」に対してflex-flowプロパティを使い、主軸および折り返しを主軸横方向かつ折り返しなし(row nowrap)と宣言する。
3. CSSウィンドウでセレクタ「#header」に対してjustify-contentプロパティを使い、主軸方向の揃え方を両端揃え(space-between)と宣言し、
   .logo(ロゴ)と.nav(ナビゲーション)の主軸方向の揃え方を両端に揃える。
4. CSSウィンドウでセレクタ「#header」に対してalign-itemsプロパティを使い、交差軸方向の揃え方を中央揃え(center)と宣言し、
   .logoと.navの交差軸方向の揃え方を中央に揃える。
5. CSSウィンドウでセレクタ「#header」に対してpaddingプロパティを使い、24px 40pxと宣言して#headerの内側上下・内側左右の余白を作る。
6. CSSウィンドウでセレクタ「.nav」に対してdisplayプロパティを使い、.navをFlexboxにする。
7. CSSウィンドウでセレクタ「.nav」に対してflex-flowプロパティを使い、主軸および折り返しを主軸横方向かつ折り返しあり(row wrap)と宣言する。
8. CSSウィンドウでセレクタ「.nav」に対してgapプロパティを使い、ナビゲーションメニューどうしの距離を16pxと宣言する。