FLEXBOX FROGGYをやってみた - miyashiiii.hatenablog.jp

ゲーム形式でFlexboxを学べるFLEXBOX FROGGYというコンテンツを見つけたので取り組んでました。

内容としては、flex関連のCSSを記述して、カエルくんたちを蓮の葉の上にうまく持っていってあげる、というもの。パズル感覚で取り組めて面白いです。

ステージ数としては24問で、所要時間としては以下のメモを取りながら取り組んで30分かからない程度でした。

以下、学習メモ

justify-content: space-evenly: 各要素を等間隔に並べる。左右の余白は各要素間の間隔と同じ大きさ。
- 結構使いどころありそうな気もするけど、知らなかった
- space-aroundと似てるけど、space-aroundの方は左端・右端の余白の大きさが各要素間の間隔の半分の大きさになる。
  - この記事の図がわかりやすかった。
    - 代表的なjustify-contentと、特徴。 | Qiita
    - 各要素が左右に同じ大きさの余白をあるイメージ
flex-directionにcolumnを指定すると、justify-contentやalign-itemsなどの方向も変わる
- これは「主軸（Main Axis）」が横方向から縦方向に変わるため
  - 参考: フレックスコンテナー内のアイテムの配置#主軸の変更 | MDN
  - justify-contentは主軸方向の間隔を制御、align-items,align-self,align-contentは交差軸方向の間隔や位置を制御
    - 交差軸: 主軸と交差する軸。主軸が横方向なら交差軸は縦方向だし、主軸が縦方向なら交差軸は横方向
align-self: 縦方向位置の個別指定。これも使ったことがなかった。どういうユースケースがあるんだろう。
flex-flow: flex-directionとflex-wrap（折り返しの指定）のショートハンド記法。
- 例: flex-flow: column wrap

自分でカエルくんを動かしてみることで各プロパティの挙動を理解できました。終盤のステージになると各プロパティや値の名前もスラスラ書けるようになりました。
少し経ったらまた忘れるだろうから、また気が向いたときに取り組んでみよう。

flex周りでちゃんとわかりきってないのがflexプロパティ。FLEXBOX FROGGYでは登場しなかったけど、これも↓のページなんかで勉強しておこう。

こういう記事も見つけました。別のFlexboxの教材や、CSS セレクタが学べる教材があるみたい。あとでやってみよう。ゲーム感覚でプログラミング学べるサービス集 #AWS - Qiita