Flex

Flex shorthand property

Syntax

layout="flex:[value]"

Values

Value	CSS Output	Description
1	flex: 1 1 0%	Flex 1
auto	flex: 1 1 auto	Flex auto
initial	flex: 0 1 auto	Initial flex
none	flex: none	No flex

Examples

<div layout="flex:1">Flexible item</div>

Preview

Flex 1

layout="flex:1" - Equal distribution of space among items

flex:1flex:1flex:1

View Code

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

Flex Auto vs None

layout="flex:auto" - Different flex behaviors compared

autonone

View Code

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span layout="flex:auto" space="p:small" visual="bg:primary text:white rounded:small">auto</span>
  <span layout="flex:none" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">none</span>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div layout="flex:[custom-value]">Custom</div>