Display

Flexbox and display utilities.

Flex Layout

Start Center (items-center) End

Base

Class	Description
`.ui-display`	Base class

Flex Direction

Column 1 Column 2 Column 3

Row 1 Row 2 Row 3

<div class="ui-flex ui-flex-col ui-gap-1 ui-p-2 ui-bg-muted">
  <span>Column 1</span>
  <span>Column 2</span>
  <span>Column 3</span>
</div>
<div class="ui-flex ui-flex-row ui-gap-1 ui-p-2 ui-bg-muted">
  <span>Row 1</span>
  <span>Row 2</span>
  <span>Row 3</span>
</div>

Container Queries

container-inline: enables inline-size container queries on children

container-normal: named container without size containment

<!-- Make an element a container query context. -->
<div class="ui-container-inline ui-bg-muted ui-p-2">
  <span class="ui-text-sm">container-inline: enables inline-size container queries on children</span>
</div>
<div class="ui-container-normal ui-bg-muted ui-p-2">
  <span class="ui-text-sm">container-normal: named container without size containment</span>
</div>

Visibility

Visible Invisible (hidden but occupies space)

<span class="ui-visible ui-p-1 ui-bg-muted">Visible</span>
<span class="ui-invisible ui-p-1 ui-bg-muted">Invisible (hidden but occupies space)</span>