Alignment with justify-content and align-items
justify-content distributes free space along the main axis. align-items aligns flex items on the cross axis. align-self overrides the cross-axis alignment for an individual item.
The exact physical direction depends on writing mode and flex-direction, so thinking in terms of main and cross axes is more robust than memorizing left/right behavior.
Flexbox Alignment
Centered Content
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
}💡 When the default row direction is used, both axes are centered, producing a centered item.
Key Takeaways
justify-contentworks primarily on the main axis.align-itemsworks primarily on the cross axis.
Knowledge Check
In a default row flex container, which property primarily controls horizontal free-space distribution?