Spacer

Flexible space filler that grows to fill available space in flex containers.

Default

Start

End

Base

Class	Description
`.ui-spacer`	Base class

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-spacer-size`	`var(--ui-spacer-size)`	Overall size

Between Items

Logo

Nav 1 Nav 2 Nav 3

<div class="ui-row" style="inline-size: 100%; background: var(--ui-color-bg-subtle); padding: var(--ui-space-2)">
  <span class="ui-bg-muted ui-p-1">Logo</span>
  <div class="ui-spacer"></div>
  <span class="ui-bg-muted ui-p-1">Nav 1</span>
  <span class="ui-bg-muted ui-p-1">Nav 2</span>
  <span class="ui-bg-muted ui-p-1">Nav 3</span>
</div>