Align vs Justify Items
One thing confuses me and I often forget it. It's how align-items and justify-content work in CSS, and when to use each.
Flex Only Feature
Both align-items and justify-content are only for flex containers. They set where the items sit inside a flex container.
Justify Content
It sets where flex items sit on the main axis of the container.
Align Item
It sets where flex items sit on the cross axis of the container.
For example, take a row direction flex. With align-items, you can place all the items at the same vertical level.
Justify and Align Individual Items
The options above apply to all items in the container. The justify-self and align-self props, though, set one item's place on the main and cross axis.
useful links