Repel
The Repel layout distributes items with space-between, pushing them to opposite ends of the container. This component creates a layout where items are pushed apart with equal space between them, making it ideal for navigation bars, toolbars, or any interface where you need to separate content groups while maintaining alignment.
Example
<div class="repel --center" style="--layout-gap: 1rem">
<div class="logo">Brand Logo</div>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</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 |
Class Utilities
| Class | Description |
|---|---|
.--column, .--row |
Controls the flex direction |
.--start, .--end, .--center, .--stretch |
Controls cross-axis alignment of items |