Box alignment

Box alignment in flexbox and grid is done with justify-content (distribution along the main axis), align-items (alignment along the cross axis), align-self (for a single item), and gap (spacing). The axes swap depending on flex-direction. These properties replace margin hacks.

Example

display: flex;
justify-content: space-between;
align-items: center;

Related concepts

The whole glossary