Flex

Flexbox utility classes for layout, alignment, and distribution.

Display

.flex display: flex

.inline-flex display: inline-flex

.flex-center display: flex; align-items: center

.inline-flex-center display: inline-flex; align-items: center

Direction

.flex-row flex-direction: row

.flex-row-reverse flex-direction: row-reverse

.flex-column flex-direction: column

.flex-column-reverse flex-direction: column-reverse

Wrap

.flex-wrap flex-wrap: wrap

.flex-nowrap flex-wrap: nowrap

.flex-wrap-reverse flex-wrap: wrap-reverse

Flex sizing

.flex-auto flex: 1 1 auto (with min-width/height: 0)

.flex-none flex: none

.flex-shrink flex-shrink: 0

.flex-grow flex-grow: 1

Align items

.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

Align self

.self-start align-self: flex-start

.self-end align-self: flex-end

.self-center align-self: center

.self-baseline align-self: baseline

.self-stretch align-self: stretch

Justify content

.justify-start justify-content: flex-start

.justify-end justify-content: flex-end

.justify-center justify-content: center

.justify-between justify-content: space-between

.justify-around justify-content: space-around

Align content

.content-start align-content: flex-start

.content-end align-content: flex-end

.content-center align-content: center

.content-between align-content: space-between

.content-around align-content: space-around

.content-stretch align-content: stretch

Example

<nav class="flex items-center justify-between gap-m">
  <a href="/">Logo</a>
  <div class="flex gap-xs">
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</nav>