Question 1

justify or align?

Accepted Answer

justify-content works along the main axis, align-items along the cross axis. Switching flex-direction from row to column swaps what each one does — that's where the confusion comes from.

Question 2

Why does my item shrink?

Accepted Answer

Flex items shrink by default (flex-shrink: 1) and can't go narrower than their content because of min-width: auto. When long text overflows, setting min-width: 0 is usually the fix.

Flexbox Playground