justify-content aligns items across the main axis. align-items aligns items along the cross axis.
content — to position something along the primary axis.items — to position something along the cross axis.content — a group of “stuff” that can be distributed.items — single items that can be positioned individually.
- When you change
flex-direction to column, justify-content aligns vertically and align-items aligns horizontally.
-
Gap
- Setting
gap on a flex container adds a specified space between flex items.