Flexbox

Utilities for controlling flex container direction, wrapping, alignment, and child sizing. Use with the .flex display utility.

Class Reference

Direction

Class	Property
`.flex-row`	`flex-direction: row`
`.flex-row-reverse`	`flex-direction: row-reverse`
`.flex-col`	`flex-direction: column`
`.flex-col-reverse`	`flex-direction: column-reverse`

Wrap

Class	Property
`.flex-wrap`	`flex-wrap: wrap`
`.flex-nowrap`	`flex-wrap: nowrap`

Align Items

Class	Property
`.items-start`	`align-items: flex-start`
`.items-end`	`align-items: flex-end`
`.items-center`	`align-items: center`
`.items-baseline`	`align-items: baseline`
`.items-stretch`	`align-items: stretch`

Justify Content

Class	Property
`.justify-start`	`justify-content: flex-start`
`.justify-end`	`justify-content: flex-end`
`.justify-center`	`justify-content: center`
`.justify-between`	`justify-content: space-between`

Align Self

Class	Property
`.self-start`	`align-self: flex-start`
`.self-end`	`align-self: flex-end`
`.self-center`	`align-self: center`
`.self-stretch`	`align-self: stretch`

Flex Shorthand

Class	Property
`.flex-1`	`flex: 1 1 0%`
`.flex-auto`	`flex: 1 1 auto`
`.flex-none`	`flex: none`

Grow & Shrink

Class	Property
`.grow`	`flex-grow: 1`
`.grow-0`	`flex-grow: 0`
`.shrink`	`flex-shrink: 1`
`.shrink-0`	`flex-shrink: 0`

Gap

Class	Property
`.gap-0`	`gap: 0`
`.gap-1`	`gap: var(--spacing-1)`
`.gap-2`	`gap: var(--spacing-2)`
`.gap-3`	`gap: var(--spacing-3)`
`.gap-4`	`gap: var(--spacing-4)`
`.gap-6`	`gap: var(--spacing-6)`
`.gap-8`	`gap: var(--spacing-8)`
`.gap-10`	`gap: var(--spacing-10)`
`.gap-12`	`gap: var(--spacing-12)`

Examples

Horizontal Navigation Bar

A common navbar pattern with logo on the left and links on the right:

Logo

HomeAboutContact

<div class="flex items-center justify-between px-4 py-3">
  <span class="font-bold">Logo</span>
  <div class="flex items-center gap-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</div>

Sidebar + Content Layout

A flex layout with a fixed-width sidebar and a flexible content area:

Sidebar

Main content area grows to fill remaining space.

<div class="flex gap-4">
  <aside class="shrink-0" style="width: 200px;">Sidebar</aside>
  <main class="flex-1">Main content</main>
</div>