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 --justify-between" style="--layout-gap: 1rem">
<div>Main content area</div>
<div>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 |
|---|---|
.--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 |
.self-start, .self-center, .self-stretch, .self-end |
Aligns an individual item on the cross axis (see Layout Items) |