Flexbox-Лягушка 🐸 — Расставь элементы по местам

Уровень 1

justify-content (главная ось →)

flex-start

[🐸🐸🐸······]

Все в начале

flex-end

[······🐸🐸🐸]

Все в конце

center

[···🐸🐸🐸···]

Все плотно в центре

space-between

[🐸····🐸····🐸]

Прилипли к краям, дыры только внутри

space-around

[·🐸···🐸···🐸·]

От края до лягушки в 2 раза меньше, чем между ними

space-evenly

[··🐸··🐸··🐸··]

Идеально одинаковая дистанция везде

align-items (поперечная ось ↕)

flex-start

Прижать к потолку

flex-end

Прижать к полу

center

По центру по вертикали

stretch

Растянуть (как жвачку) сверху донизу

flex-direction (направление)

row

В строку слева направо (→)

row-reverse

В строку задом наперёд (←)

column

В колонку сверху вниз (↓)

column-reverse

В колонку снизу вверх (↑)

🎯 Пруд

✏️ Твой CSS

🐸 Flexbox-Лягушка