Layout

Repel

The .repel layout pushes items apart using justify-content: space-between while keeping wrapping behavior. Use it for rows with content at opposite edges, such as toolbars and action rows.

For site navigation, use the semantic navbar pattern: <header><nav><ul>...</ul></nav></header>. A <nav> that is a direct child of <header> already behaves like .repel and does not usually need the class.

Usage

• Add class="repel" to the parent element.
• Set --gap to control spacing between wrapped items.
• Set --repel-vertical-alignment to control cross-axis alignment. The fallback value is center.
• Add .nowrap to prevent wrapping.