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:
ClassCSSEffect
.flex-rowflex-direction: rowChildren flow left to right (default)
.flex-colflex-direction: columnChildren stack top to bottom
.flex-row-reverseflex-direction: row-reverseChildren flow right to left
.flex-col-reverseflex-direction: column-reverseChildren stack bottom to top

​
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: 
<nav class="flex flex-row gap-4">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/work">Work</a>
  <a href="/contact">Contact</a>
</nav>

​
Vertical column — form stack

Switch to .flex-col to stack form fields, card sections, or sidebar items cleanly: 
<form class="flex flex-col gap-4">
  <input type="text" placeholder="Full name" />
  <input type="email" placeholder="Email address" />
  <textarea placeholder="Your message"></textarea>
  <button type="submit">Send message</button>
</form>

​
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: 
<!-- Column on mobile, row from medium breakpoint upward -->
<div class="flex flex-col flex-row--on-m gap-4">
  <div class="basis-1-3">Sidebar</div>
  <div class="basis-2-3">Main content</div>
</div>
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.
ClassCSSEffect
.flex-nowrapflex-wrap: nowrapAll children stay on one line (default)
.flex-wrapflex-wrap: wrapChildren wrap to new lines as needed
.flex-wrap-reverseflex-wrap: wrap-reverseChildren wrap upward instead of downward

​
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: 
<div class="flex flex-wrap gap-4">
  <div class="basis-full basis-1-2--on-m basis-1-3--on-l">Card one</div>
  <div class="basis-full basis-1-2--on-m basis-1-3--on-l">Card two</div>
  <div class="basis-full basis-1-2--on-m basis-1-3--on-l">Card three</div>
  <div class="basis-full basis-1-2--on-m basis-1-3--on-l">Card four</div>
</div>
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: 
<div class="flex flex-wrap flex-nowrap--on-m gap-4">
  <div>Tab one</div>
  <div>Tab two</div>
  <div>Tab three</div>
  <div>Tab four</div>
</div>

​
Flex grow, shrink, and basis

These utilities control how individual flex children size themselves relative to available space.
ClassCSSEffectResponsive
.flex-growflex-grow: 1Child expands to fill leftover space—
.flex-shrinkflex-shrink: 1Child shrinks when space is tight—
.basis-autoflex-basis: autoSize based on content width--on-*
.basis-fullflex-basis: 100%Take the full container width--on-*
.basis-0flex-basis: 0Start from zero — let flex-grow distribute space--on-*
.basis-pxflex-basis: 1pxMinimal basis for grow-only columns--on-*

​
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.
ClassValueUse case
.basis-1-250%Two equal columns
.basis-1-333.333%Three equal columns
.basis-2-366.666%Wide main + narrow sidebar
.basis-1-425%Four equal columns
.basis-3-475%Wide main + very narrow sidebar
<!-- Two-thirds / one-third split layout -->
<div class="flex flex-row gap-6">
  <div class="basis-2-3">Main content</div>
  <div class="basis-1-3">Sidebar</div>
</div>
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.
ClassCSSEffect
.order-firstorder: -99999Move item to the visual start
.order-lastorder: 99999Move item to the visual end
<!-- CTA appears last in HTML but first on small screens -->
<div class="flex flex-col flex-row--on-m gap-4">
  <div>Supporting detail</div>
  <div>Secondary detail</div>
  <div class="order-first order-last--on-m">Call to action</div>
</div>

​
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.