[レイアウト練習]フレックスボックスレイアウト 3カラムレイアウト編

CodePenを使ってフレックスボックスによる3カラムレイアウトの練習を行ってみましょう。
決められたルールと注意点を元に、以下の完成予想図を目指しましょう。

完成予想図

レイアウト練習CodePen 問題編

では早速CodePenの編集画面を開いて記述を行なってみましょう。
下記ウィンドウ右上の「EDIT ON CODEPEN」のボタンをクリックして開きましょう。

See the Pen レイアウト練習:flex-boxレイアウト③ 問題編 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

html編集ポイント・・・入れ子構造を考慮して挿入する

ルール

1. 「section#blog」の中の「h2」と同階層に「ul」を挿入する。

ヒント

1. 同階層とは兄弟関係のこと。どちらが上か下かなどはなく、横並びであって親子関係になってはならない。

css編集ポイント・・・ 「各セレクタ」の「各プロパティ」と「値」を調整する

ルール

1. section#blogはコンテンツ幅(1000px)で中央揃えを行い、さらに内側の余白を上下左右すべて30pxにする。
2. ulの中でliを3つ横並びにし、主軸起点に揃え、左端から配置する。またアイテム同士の余白を30pxにする。

ヒント

1. 中央揃えのためには、とある「おまじない」を使った。どんな「おまじない」を使う?
   また内側の余白に使うプロパティはどんなもので一括指定の記述はどんなものだった?
2. フレックスコンテナに指定する主軸方向の揃え方の使用プロパティは「justify-content」であった。
   では左端から配置する場合の値は?またフレックスアイテム同士の余白にはどんなプロパティを使う?

コーディングのヒント

コーディングのヒントはフレックスボックスやmargin・paddingの記事を確認してみましょう。

[コーディングの応用] どうしても覚えてほしいレイアウトを簡単に組む方法!フレックスボックス(flexbox)

[コーディングの基礎]「margin」と「padding」