Reference
Flexbox
Utilities for flex container direction, alignment, and child sizing.
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 |
Align items
| Class | Property |
|---|---|
items-start | align-items: start |
items-center | align-items: center |
items-end | align-items: end |
items-stretch | align-items: stretch |
Justify content
| Class | Property |
|---|---|
justify-start | justify-content: start |
justify-center | justify-content: center |
justify-end | justify-content: end |
justify-stretch | justify-content: stretch |
justify-around | justify-content: space-around |
justify-between | justify-content: space-between |
Flex child sizing
| Class | Property |
|---|---|
flex-1 | flex: 1 |
flex-auto | flex: auto |
flex-initial | flex: initial |
flex-none | flex: none |
Order
| Class | Property |
|---|---|
order-first | order: -9999 |
order-last | order: 9999 |
order-none | order: 0 |
Examples
Horizontal row, vertically centered
<div class="flex items-center gap-md">
<img src="..." alt="" />
<span>Label</span>
</div>Stack with consistent gap
<div class="flex flex-col gap-sm">
<p>First.</p>
<p>Second.</p>
<p>Third.</p>
</div>Push apart
<header class="flex items-center justify-between gap-md">
<a href="/">Logo</a>
<nav class="flex gap-sm">
<a href="/about">About</a>
<a href="/pricing">Pricing</a>
</nav>
</header>Fill remaining space
<div class="flex gap-md">
<aside style="width: 200px">Fixed sidebar</aside>
<main class="flex-1">Fills the rest.</main>
</div>Gap
Use gap-* utilities for spacing between flex children: gap-xs through gap-xl. Replaces margin-on-each-child patterns and handles wrapping cleanly.
What's not included
Zazz doesn't ship flex-wrap, justify-items, align-self, flex-basis, or flex-grow/flex-shrink utilities by default. Apply directly in CSS when you need them:
.tags {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
}The defaults cover most layout needs without bloating the utility surface. If your project uses one of these patterns frequently, add it as a custom utility.