レイアウトで遊んでみよう 課題1 Flexbox逆さ積み木

課題1 「Flexbox逆さ積み木」

課題1ではFlexboxを使って上下が逆の逆さ積み木をしてみましょう。
HTMLウィンドウ・CSSウィンドウを使い、flex-containerを箱、flex-itemを積み木として逆さ積み木を作りましょう。
完成図は以下です。

完成図

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

See the Pen コーディング応用:Flexbox逆さ積み木 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

Flexbox逆さ積み木 コーディング手順説明

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

1. CSSウィンドウでdisplayプロパティを使い、flex-containerをFlexboxにする。
2. CSSウィンドウでflex-flowプロパティを使い、主軸および折り返しを主軸横方向かつ折り返しあり(row wrap)と宣言する。
3. CSSウィンドウでjustify-contentプロパティを使い、主軸方向の揃え方を両端揃え(space-between)と宣言し、6つ目と7つ目の間に積み木ひとつ分の間隔をあける。
4. CSSウィンドウでgapプロパティを使い、積み木と積み木の間の距離を10pxと宣言する。
5. HTMLウィンドウを使ってclassを追加付与し、1つ目の積み木の横幅を積み木2つ+余白分にする。
6. HTMLウィンドウを使ってclassを追加付与し、4つ目の背景色を赤にする。

ヒント

• 積み木のセレクタ「.flex-item」のwidth(横幅)は80pxで、その下のセレクタ「.width-twice」のwidthは170px」になっている。
  この大きさは、積み木二つ分(80px + 80px)+ 余白(10px)の大きさで、ひとつだけ横長になっているひとつ目の積み木に使える。
• セレクタ「.bgcolor-red」の「background: #f00;」は「背景色を赤にする」という宣言である。
  HTML記述でこれをclassとして追加付与すれば、4つ目の積み木の背景色の赤を実現できる。
• 6つ目と7つ目の間の積み木ひとつ分の間隔は、プロパティ「justify-content」で値に「space-between(両端揃え)」を宣言すれば実現できる。