[レイアウト練習]フレックスボックスレイアウト 横並び上下中央配置編

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

完成予想図

レイアウト練習CodePen 問題編

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

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

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

ルール

1. 「section#profile > div.content」の中に「div.img」と「div.text」を同階層で挿入する。

ヒント

1. 階層が複数存在していて一見難しく見えるが、フレックスコンテナは「div.content」、フレックスアイテムは「div.img」および「div.text」と、フレックスボックスのルール通りシンプルに考えるとよい。

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

ルール

1. section#profileはコンテンツ幅(1000px)で中央揃えを行い、さらに内側の余白を上下左右すべて30pxにする。
2. div.contentの中でdiv.imgとdiv.textを横並びにし、主軸方向および交差軸方向ともに中央揃えにする。またアイテム同士の余白を30pxにする。
3. div.textの中にあるh2の見出しは下方向外側の余白を20pxにする。

ヒント

1. 中央揃えのためには、とある「おまじない」を使った。どんな「おまじない」を使う?
   また内側の余白に使うプロパティはどんなもので、その一括指定の記述はどんなものだった?
2. 横並びレイアウトの使用プロパティは「display」、主軸方向の揃え方の使用プロパティは「justify-content」、
   交差軸方向の揃え方の使用プロパティは「align-items」であった。ではそれぞれの値は?
   またフレックスアイテム同士の余白にはどんなプロパティを使う?
3. 外側の余白を作る時のプロパティは「margin」だが、今回は下方向のみの指定。その場合にはどんなプロパティを使う?

コーディングのヒント

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

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

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