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

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

完成予想図

レイアウト練習のルール

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

ルール

1. articleタグを左、asideタグを右に、横並びに配置できるように各コードを挿入する。

ヒント

1. 「article」「aside」を中央揃えしたブロックの中に入れたい。ではどこに挿入したらよい?

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

ルール

1. mainタグの中でブラウザ幅(横幅1000px)のdiv.containerタグを中央揃えする。
2. div.containerタグの中でarticleタグ(横幅:760px)とasideタグ(横幅:220px)を横並びにする。

ヒント

1. 中央揃えのためには、とある「おまじない」を使った。どんな「おまじない」を使う?
2. 横並びレイアウトの使用プロパティは「display」。では値は?
3. articleタグとasideタグは主軸方向に両端揃えにするため使用プロパティは「justify-content」。では値は?

レイアウト練習CodePen 問題編

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

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