baseUtilities
Flexbox
Flexbox utilities for containers, direction, grow/shrink behaviors, and item alignment.
Flexbox utilities control container layout, item flex factors, and alignment across axes.
Container & direction
Loading components…
<div class="flex flex-col gap-lg w-full max-w-xl"> <div class="flex flex-col gap-xs"> <span class="text-xs text-muted-foreground font-strong">flex flex-row</span> <div class="flex flex-row gap-sm"> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 1 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 2 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 3 </div> </div> </div> <div class="flex flex-col gap-xs"> <span class="text-xs text-muted-foreground font-strong">flex flex-col</span> <div class="flex flex-col gap-sm"> <div class="bg-muted text-muted-foreground rounded-md p-sm text-center text-sm font-strong"> 1 </div> <div class="bg-muted text-muted-foreground rounded-md p-sm text-center text-sm font-strong"> 2 </div> <div class="bg-muted text-muted-foreground rounded-md p-sm text-center text-sm font-strong"> 3 </div> </div> </div></div>| Class | Declaration |
|---|---|
flex | display: flex |
inline-flex | display: inline-flex |
flex-row | flex-direction: row |
flex-row-reverse | flex-direction: row-reverse |
flex-col | flex-direction: column |
flex-col-reverse | flex-direction: column-reverse |
flex, inline-flex, flex-row, and flex-col support responsive prefixes (e.g. flex-col @md:flex-row).
Flex grow & shrink
Loading components…
<div class="flex gap-sm w-full max-w-xl"> <div class="flex-none bg-muted text-muted-foreground rounded-md p-sm text-center text-sm font-strong" > flex-none </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > flex-1 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > flex-1 </div></div>| Class | Declaration | Description |
|---|---|---|
flex-1 | flex: 1 | Grow and shrink, ignore initial size |
flex-auto | flex: auto | Grow and shrink from content size |
flex-initial | flex: initial | Shrink but do not grow |
flex-none | flex: none | Prevent growing or shrinking |
Alignment and distribution
Loading components…
<div class="flex flex-col gap-md w-full max-w-xl"> <div class="flex flex-col gap-xs"> <span class="text-xs text-muted-foreground font-strong">justify-start</span> <div class="flex justify-start gap-sm bg-muted rounded-md p-sm"> <span class="ui-badge" data-variant="primary">a</span> <span class="ui-badge" data-variant="primary">b</span> <span class="ui-badge" data-variant="primary">c</span> </div> </div> <div class="flex flex-col gap-xs"> <span class="text-xs text-muted-foreground font-strong">justify-center</span> <div class="flex justify-center gap-sm bg-muted rounded-md p-sm"> <span class="ui-badge" data-variant="primary">a</span> <span class="ui-badge" data-variant="primary">b</span> <span class="ui-badge" data-variant="primary">c</span> </div> </div> <div class="flex flex-col gap-xs"> <span class="text-xs text-muted-foreground font-strong">justify-between</span> <div class="flex justify-between gap-sm bg-muted rounded-md p-sm"> <span class="ui-badge" data-variant="primary">a</span> <span class="ui-badge" data-variant="primary">b</span> <span class="ui-badge" data-variant="primary">c</span> </div> </div></div>Cross axis (align-items) | Main axis (justify-content) |
|---|---|
items-start | justify-start |
items-center | justify-center |
items-end | justify-end |
items-stretch | justify-stretch |
justify-between | |
justify-around |
Item self-alignment
| Class | Declaration |
|---|---|
self-auto | align-self: auto |
self-start | align-self: start |
self-center | align-self: center |
self-end | align-self: end |
self-stretch | align-self: stretch |
Grid item self-justification classes are also available: justify-self-auto, justify-self-start, justify-self-center, justify-self-end, and justify-self-stretch.