Epic CSS / Documentation
Flexbox
Arrange a group of items along a row or column. Add flex to the parent, then choose its direction, alignment, wrapping, and spacing.
Start a flex layout
flex sets display: flex. Direct children become flex items. The default direction is a row.
<div class="flex gap-16">
<div class="docs-demo-item">One</div>
<div class="docs-demo-item">Two</div>
<div class="docs-demo-item">Three</div>
</div>Direction
| Class | Effect |
|---|---|
flex-row | Place items in a row. |
flex-col | Place items in a column. |
flex-col-reverse | Reverse the visual order in a column. DOM and keyboard order stay unchanged. |
<div class="flex flex-col gap-12">
<div class="docs-demo-item">One</div>
<div class="docs-demo-item">Two</div>
<div class="docs-demo-item">Three</div>
</div>Responsive direction
Start with flex-col, then use a breakpoint-prefixed row class. Resize this example: it becomes a row at 820 pixels.
<div class="flex flex-col md-flex-row gap-16">
<div class="docs-demo-item">Stacked on small screens</div>
<div class="docs-demo-item">Side by side from md</div>
</div>| Row class | Minimum viewport width |
|---|---|
xs-flex-row | 0 px |
sm-flex-row | 480 px |
md-flex-row | 820 px |
lg-flex-row | 960 px |
xl-flex-row | 1200 px |
These prefixes change direction, not display. Keep flex on the parent. The current stylesheet does not generate responsive display classes such as md-flex, or an inline-flex utility.
Alignment
Justification distributes items along the main axis. Item alignment positions them along the cross axis; those axes change when the direction is a column.
<div class="flex justify-between items-center gap-16">
<span class="docs-demo-item">Brand</span>
<span class="docs-demo-item">Navigation</span>
</div>| Utility family | Available values |
|---|---|
| Justify content | justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly |
| Align items | items-start, items-end, items-center |
| Align multiple lines | content-start, content-end, content-center, content-between, content-around |
The content-* utilities need wrapped lines and spare cross-axis space to have a visible effect. Additional alignment and responsive variants are not assumed by these examples.
Wrapping and item size
flex-wrap allows items to move onto another line. flex-basis-300 sets flex: 0 0 300px: it fixes the basis at 300 pixels and disables growing and shrinking. Use it where that fixed item width fits your layout.
<div class="flex flex-wrap gap-16">
<div class="docs-demo-item">First item</div>
<div class="docs-demo-item">Another item</div>
<div class="docs-demo-item">One more item</div>
<div class="docs-demo-item">Items wrap as space runs out</div>
</div>Spacing
Use gap-16 for one rem between items, or another key from the shared spacer scale. Gap utilities work with both Flexbox and Grid. They do not add space around the outside of the parent.