Flex Basis

Set initial size of flex item

Syntax

layout="basis:[value]"

Values

Value	CSS Output	Description
auto	flex-basis: auto	Auto basis
0	flex-basis: 0	Zero basis

Examples

<div layout="basis:[200px]">200px basis</div>

Preview

Fixed Basis

layout="basis:[100px]" - Items with different basis sizes

100px150pxauto

View Code

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

Arbitrary Values

Supports custom values using bracket syntax:

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