Flex Basis

Utilities for controlling the initial size of flex items before space is distributed.

Using the spacing scale

Use basis-<number> utilities like basis-64 or basis-128 to set a fixed initial size for flex items using the spacing scale.

Style('flex flex-row', children: [
  Style('basis-64', child: Text('01')),
  Style('basis-64', child: Text('02')),
  Style('basis-128', child: Text('03')),
])

Using the container scale

Use basis-<size> utilities like basis-3xs or basis-sm to set a fixed initial size using the container scale.

Style('flex flex-row', children: [
  Style('basis-3xs', child: Text('01')),
  Style('basis-2xs', child: Text('02')),
  Style('basis-xs', child: Text('03')),
  Style('basis-sm', child: Text('04')),
])

Using percentages

Use basis-<fraction> utilities like basis-1/3 or basis-2/3 to set a flex basis as a fraction of the main-axis container size.

Style('flex flex-row', children: [
  Style('basis-1/3', child: Text('01')),
  Style('basis-2/3', child: Text('02')),
])

Class reference

Class	Description
`basis-auto`	Set flex basis to auto
`basis-full`	Set flex basis to 100%
`basis-<number>`	Set flex basis using spacing scale (e.g., `basis-4` = 16px, `basis-128` = 512px)
`basis-3xs`	Set flex basis to 256px (container scale)
`basis-2xs`	Set flex basis to 288px (container scale)
`basis-xs`	Set flex basis to 320px (container scale)
`basis-sm`	Set flex basis to 384px (container scale)
`basis-md`	Set flex basis to 448px (container scale)
`basis-lg`	Set flex basis to 512px (container scale)
`basis-xl`	Set flex basis to 576px (container scale)
`basis-2xl`	Set flex basis to 672px (container scale)
`basis-3xl`	Set flex basis to 768px (container scale)
`basis-4xl`	Set flex basis to 896px (container scale)
`basis-5xl`	Set flex basis to 1024px (container scale)
`basis-6xl`	Set flex basis to 1152px (container scale)
`basis-7xl`	Set flex basis to 1280px (container scale)
`basis-1/2`	Set flex basis to 50%
`basis-1/3`	Set flex basis to 33.333%
`basis-2/3`	Set flex basis to 66.667%
`basis-1/4`	Set flex basis to 25%
`basis-2/4`	Set flex basis to 50%
`basis-3/4`	Set flex basis to 75%
`basis-1/5`	Set flex basis to 20%
`basis-2/5`	Set flex basis to 40%
`basis-3/5`	Set flex basis to 60%
`basis-4/5`	Set flex basis to 80%
`basis-1/6`	Set flex basis to 16.667%
`basis-5/6`	Set flex basis to 83.333%
`basis-1/12`	Set flex basis to 8.333%
`basis-[<value>]`	Set flex basis to an arbitrary value, e.g., `basis-[200]` or `basis-[240px]`

basis-(<custom-property>) is resolved against theme-defined StyleThemeData.customProperties — it behaves like basis-[<value>] when the theme defines the property; cascade-inherited or JS-set CSS variables remain out of scope.

Unsupported: basis-[30vw] and other viewport-relative arbitrary values are not supported; numeric arbitrary values (basis-[200], basis-[240px]) work correctly.