Skip to main content
Once you have a flex container, the direction utilities determine which way its children flow — left to right, top to bottom, or in reverse. Wrap utilities decide what happens when children run out of space. Together these two sets give you full control over how a layout adapts to different content amounts and screen sizes without extra container nesting.

​
Flex direction

The direction utilities set the main axis of a flex container. All four values are available:

​
Horizontal row — navigation bar

The default flex direction is already row, but declaring it explicitly makes your intent clear and makes responsive overrides more predictable:

​
Vertical column — form stack

Switch to .flex-col to stack form fields, card sections, or sidebar items cleanly:

​
Responsive direction change

A very common pattern is stacking items vertically on mobile and switching to a row on medium screens and up. Use the --on-* suffix to override direction at a breakpoint:
Reverse variants (.flex-row-reverse, .flex-col-reverse) are useful when you want the visual order to differ from the DOM order — for example, placing a call-to-action before its supporting copy in the visual layout while keeping the semantic HTML order intact for accessibility.

​
Flex wrap

Wrap utilities control whether children are forced onto a single line or allowed to wrap onto additional lines when there is not enough space.

​
Responsive card grid with flex-wrap

Adding .flex-wrap turns a flex row into a responsive multi-line layout. Combine it with basis-* utilities to set each card’s target width:
On small screens every card takes full width. On medium screens they pair up in two columns. On large screens they sit three across.

​
Responsive wrap toggle

Sometimes you want wrapping on mobile (where space is tight) but a single enforced row on larger screens:

​
Flex grow, shrink, and basis

These utilities control how individual flex children size themselves relative to available space.

​
Fractional basis values

Use fractional basis classes to split a row into proportional columns. All fractional basis classes support the --on-* responsive suffix, making them ideal for column layouts that reflow at different breakpoints.
Fractional basis utilities work best alongside .flex-wrap and without flex-grow applied, so children don’t expand beyond their intended proportion. If you want fluid columns that fill all remaining space, combine .basis-0 with .flex-grow instead.

​
Order

Order utilities let you rearrange flex children visually without changing the DOM structure — helpful for accessibility and for responsive layouts where priority order differs across screen sizes. Both classes support the --on-* responsive suffix so you can change visual order at specific breakpoints.

​
Best practices

Always declare direction

Even though flex-row is the browser default, adding it explicitly makes responsive overrides clearer and avoids confusion when reading the class list later.

Pair wrap with basis

.flex-wrap alone won’t create even columns. Set a basis-* class on each child so they wrap at the right widths rather than collapsing to their content size.

Use order sparingly

Order changes only the visual sequence — screen readers and keyboard navigation still follow the DOM order. Use it for cosmetic reordering, not for meaningful content sequences.

Reverse for RTL mirroring

Reverse direction variants can substitute for RTL layout adjustments in simple cases, but for full RTL support consider using logical CSS properties in your custom styles.