Flex
The Flex layout provides a default flexbox utility with configurable properties and helper classes. This component serves as a flexible foundation for creating various layouts with full control over flex properties, direction, alignment, and spacing.
Example
<div class="flex --gap-2 --justify-between">
<div class="grow">Main content area</div>
<div class="no-shrink">Sidebar</div>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-direction |
row |
Flex direction |
--layout-gap |
0 |
Gap between child elements |
--layout-items |
stretch |
Align items on cross axis |
--layout-justify |
start |
Justify content on main axis |
Class Utilities
| Class | Description |
|---|---|
.--gap-* |
Controls spacing between items using Feo.css design tokens for size |
.--column, .--row |
Controls the flex direction |
.--start, .--end, .--center, .--stretch |
Controls cross-axis alignment of items |
.--justify-* |
Controls main-axis distribution of items (start, end, center, between, around) |
.wrap |
Enables flex-wrap |
.grow |
Sets flex-grow: 1 |
.no-shrink |
Sets flex-shrink: 0 |
.self-start, .self-center, .self-stretch, .self-end |
Individual align-self properties for specific flex items |