Align Content

Align content rows in multi-line flex container

Syntax

layout="content:[value]"

Values

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

Examples

<div layout="flex wrap content:center">Centered rows</div>

Preview

Content Center

layout="content:center" - Center wrapped rows in multi-line container

1234

View Code

<div layout="flex wrap content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
  <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>
  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
</div>

Content Between

layout="content:between" - Space between wrapped rows

1234

View Code

<div layout="flex wrap content:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
  <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>
  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
</div>