Shorthand Alignment

Quick alignment shortcuts

Syntax

layout="[alignment]"

Values

Value	CSS Output	Description
center	justify-content: center; align-items: center	Center both axes
start	justify-content: flex-start; align-items: flex-start	Align to start
end	justify-content: flex-end; align-items: flex-end	Align to end
between	justify-content: space-between	Space between
around	justify-content: space-around	Space around
evenly	justify-content: space-evenly	Even spacing

Examples

<div layout="flex center">Centered content</div>

Preview

Center Shorthand

layout="center" - Center items on both axes at once

Centered

View Code

<div layout="flex center" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
  <span space="p:small" visual="bg:primary text:white rounded:small">Centered</span>
</div>

Between Shorthand

layout="between" - Quick space-between layout

LeftRight

View Code

<div layout="flex between" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">Left</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Right</span>
</div>