justify-contentとalign-itemsを組み合わせ、荷物を指定位置へ運ぼう。CSS Flexboxの配置を直感的に学べる60秒プログラミングゲームです。
遊び方
- 注文カードに表示されたターゲット位置を確認します。
- 横方向のjustify-contentと縦方向のalign-itemsをそれぞれ選びます。PCでは矢印キーでも変更できます。
- 箱がターゲットに重なったら出荷ボタンを押します。60秒以内に12件の完了を目指します。
このゲームで身につくこと
- justify-contentが主軸方向の配置を決めること
- align-itemsが交差軸方向の配置を決めること
- flex-start・center・flex-endを組み合わせた9方向のレイアウト
こんな人におすすめ
CSSやWeb制作をこれから学びたい小学生・中学生・高校生・プログラミング初学者
