v0.2.0

System

Flexbox & Grid

flex-basis

Utilities for controlling the initial size of flex items.

Quick reference

Every class applies on React Native

Class

Styles

React Native

basis-0

flex-basis: 0px;

flexBasis: 0

basis-0.5

flex-basis: calc(var(--spacing) * 0.5);

flexBasis: 2

basis-1

flex-basis: var(--spacing);

flexBasis: 4

basis-1.5

flex-basis: calc(var(--spacing) * 1.5);

flexBasis: 6

basis-2

flex-basis: calc(var(--spacing) * 2);

flexBasis: 8

basis-2.5

flex-basis: calc(var(--spacing) * 2.5);

flexBasis: 10

basis-2xl

flex-basis: var(--container-2xl);

flexBasis: 672

basis-2xs

flex-basis: var(--container-2xs);

flexBasis: 288

basis-3

flex-basis: calc(var(--spacing) * 3);

flexBasis: 12

basis-3.5

flex-basis: calc(var(--spacing) * 3.5);

flexBasis: 14

basis-3xl

flex-basis: var(--container-3xl);

flexBasis: 768

basis-3xs

flex-basis: var(--container-3xs);

flexBasis: 256

Show all 76 classes

The React Native column is what AstraWind resolves each class to, computed live on this page with the current color scheme. Classes with no native equivalent are accepted without effect, and AstraWind warns about them in development. See Compatibility.

← z-index

flex-direction →