Align Items

Align items along the cross axis

Syntax

layout="items:[value]"

Values

Value	CSS Output	Description
start	align-items: flex-start	Align to start
end	align-items: flex-end	Align to end
center	align-items: center	Center items
baseline	align-items: baseline	Align to baseline
stretch	align-items: stretch	Stretch items

Examples

<div layout="flex items:center">Centered</div>

Preview

Items Center

layout="items:center" - Items centered along cross axis

ShortTallShort

View Code

<div layout="flex items:center" space="g:small 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">Short</span>
  <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
</div>

Items Start

layout="items:start" - Items aligned to the start of cross axis

ShortTallShort

View Code

<div layout="flex items:start" space="g:small 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">Short</span>
  <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
</div>

Items Stretch

layout="items:stretch" - Items stretched to fill container height

123

View Code

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