Source

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 --gap-2 --center">
  <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
`.--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

← layout: Pile layout: Scroll →