Justify Content

Align items along the main axis

Syntax

layout="justify:[value]"

Values

Value	CSS Output	Description
start	justify-content: flex-start	Align to start
end	justify-content: flex-end	Align to end
center	justify-content: center	Center items
between	justify-content: space-between	Space between items
around	justify-content: space-around	Space around items
evenly	justify-content: space-evenly	Even spacing
stretch	justify-content: stretch	Stretch items

Examples

<div layout="flex justify:center">Centered</div>
<div layout="flex justify:between">Spaced</div>

Preview

Justify Start

layout="justify:start" - Items aligned to the start of container

123

View Code

<div layout="flex justify:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>

Justify Center

layout="justify:center" - Items centered along the main axis

123

View Code

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

Justify Between

layout="justify:between" - Items with equal space between them

123

View Code

<div layout="flex justify:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>