Flex Wrap

Control how flex items wrap

Syntax

layout="[wrap-value]"

Values

Value	CSS Output	Description
wrap	flex-wrap: wrap	Allow wrapping
nowrap	flex-wrap: nowrap	Prevent wrapping
wrap-reverse	flex-wrap: wrap-reverse	Wrap in reverse

Examples

<div layout="flex wrap">Wrapping flex</div>

Preview

Wrap Enabled

layout="wrap" - Items wrap to next line when container is full

Item 1Item 2Item 3Item 4

View Code

<div layout="flex wrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px;">
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 4</span>
</div>

No Wrap

layout="nowrap" - Items stay on single line (may overflow)

Item 1Item 2Item 3

View Code

<div layout="flex nowrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px; overflow: hidden;">
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
</div>