LAYOUT PUZZLE GAME

Flexbox
ファクトリー

横の位置と縦の位置を組み合わせて、
荷物を注文どおりの場所へ運ぼう！

12 ORDERS60 SECONDS9 POSITIONS

BEST SCORE0BEST COMBO0×

FACTORY MEMO

justify-content は横、align-items は縦の位置を決めます。

PRODUCTION ORDER 01

右中央へ配送

2つのCSSを選んで出荷

FLEX CONTAINERTARGET 右中央

01

.container { display: flex; justify-content: center; align-items: center; }

01

横の位置JUSTIFY-CONTENT

← →

02

縦の位置ALIGN-ITEMS

↑ ↓

i

ターゲットに箱を重ねよう

PRODUCTION REPORT

12個の荷物を正しい位置へ届けました。

FINAL SCORE0RANK S

SHIPPED12/12

ACCURACY100%

BEST COMBO12×

CSS MEMO

justify-content は主軸（今回は横）、align-items は交差軸（今回は縦）をそろえるプロパティです。