justify-*) and the cross axis (items-*, self-*, content-*) of flex containers. Together they replace nearly every manual positioning adjustment you would otherwise make in Elementor’s style panel, and all of them support responsive --on-* variants so alignment can shift at any breakpoint.
Justify Content
justify-* utilities align children along the main axis — horizontally in a row, vertically in a column.
Header with logo and navigation — justify-between
justify-between is the go-to utility for header layouts where the logo sits on the left and the navigation on the right:
Centered hero content — justify-center
Center a heading and call-to-action along the main axis with justify-center. Pair with flex-col so items stack before being centered:
Right-aligned actions — justify-end
Use justify-end to push a group of buttons or actions to the far right of a row:
Align Items
items-* utilities align children along the cross axis — vertically in a row, horizontally in a column. They apply to all children at once.
Vertically centered navigation bar — items-center
The single most-used alignment class in any UI: vertically centering mixed-height content in a horizontal bar.
Equal-height card row — items-stretch
items-stretch forces all cards in a row to match the height of the tallest card, giving the row a consistent baseline:
Align Self
self-* utilities override the parent’s align-items for one specific child. Apply them directly to the child element you want to break from the group.
A classic use case is a card row where all cards stretch to equal height, but a single featured badge should pin to the top of its cell:
Align Content
content-* utilities control how multiple lines are distributed across the cross axis. They only have a visible effect when the flex container is using .flex-wrap and children have wrapped onto more than one line.
content-* classes have no effect on single-line flex containers. You must combine them with .flex-wrap and a fixed container height for the spacing to be visible.Layout recipes
These are the three most frequently reached-for alignment combinations. Copy and adapt them as a starting point for your own components.Responsive variants
All alignment utilities support the--on-* suffix. This is useful when center-aligned content on mobile should switch to a space-between layout on wider screens:
Responsive suffixes are mobile-first:
--on-s, --on-m, --on-l, --on-xl. A class without a suffix applies at all viewport sizes and is overridden by any breakpoint-specific class.Best practices
Justify vs items: know the axis
justify-* always targets the main axis (the direction children flow). items-* and self-* target the cross axis. Keeping this mental model clear prevents trial-and-error alignment.Use self-* to break ranks
Rather than wrapping an outlier child in its own container, reach for
.self-start, .self-center, or .self-end to nudge it independently while the rest of the group stays consistent.content-* needs wrap and height
content-* has no effect unless the container both wraps (flex-wrap) and has enough height for the lines to actually spread. Set min-height or height on the container to give the lines room.Combine justify and items
Centering an element on both axes requires both
justify-center and items-center. One class alone centers on only one axis, which is a common source of “almost centered” bugs.