Flex Direction

Set the direction of flex items

Syntax

layout="[direction]"

Values

Value	CSS Output	Description
row	flex-direction: row	Horizontal (default)
col	flex-direction: column	Vertical
row-reverse	flex-direction: row-reverse	Horizontal reversed
col-reverse	flex-direction: column-reverse	Vertical reversed

Examples

<div layout="flex row">Row direction</div>
<div layout="flex col">Column direction</div>

Preview

Row Direction

layout="row" - Items arranged horizontally from left to right

123

View Code

<div layout="flex row" 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>

Column Direction

layout="col" - Items stacked vertically from top to bottom

123

View Code

<div layout="flex col" 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>

Row Reverse

layout="row-reverse" - Items arranged horizontally from right to left

123

View Code

<div layout="flex row-reverse" 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>