Flexbox

Flex Basis

Utilities to specify the initial size of the flex element before any free space is distributed based on flex factors.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
flex-basis-fill	flex-basis: fill
flex-basis-content	flex-basis: content
flex-basis-max-content	flex-basis: max-content
flex-basis-min-content	flex-basis: min-content
flex-basis-fit-content	flex-basis: fit-content

class	css
flex-basis-1	flex-basis: 0.25em
flex-basis-2	flex-basis: 0.5em
flex-basis-3	flex-basis: 0.75em
flex-basis-4	flex-basis: 1em
flex-basis-5	flex-basis: 1.25em
flex-basis-6	flex-basis: 1.5em
flex-basis-8	flex-basis: 2em
flex-basis-10	flex-basis: 2.5em
flex-basis-12	flex-basis: 3em
flex-basis-16	flex-basis: 4em
flex-basis-20	flex-basis: 5em
flex-basis-24	flex-basis: 6em
flex-basis-32	flex-basis: 8em
flex-basis-40	flex-basis: 10em
flex-basis-48	flex-basis: 12em
flex-basis-56	flex-basis: 14em
flex-basis-64	flex-basis: 16em
flex-basis-72	flex-basis: 18em
flex-basis-80	flex-basis: 20em
flex-basis-88	flex-basis: 22em
flex-basis-96	flex-basis: 24em
flex-basis-104	flex-basis: 26em
flex-basis-112	flex-basis: 28em

Usage

flex-basis: auto

flex-basis: fit-content

flex-basis: max-content

flex-basis: min-content

flex-basis: content

<div class="flex flex-basis-auto">
  ...
</div>

HTML

.dummy {
  @extend
    .flex,
    .flex-basis-auto;
}

SCSS

flex-basis: 4em

flex-basis: 32em

flex-basis: 64em

<div class="flex flex-basis-32">
  ...
</div>

HTML

.dummy {
  @extend
    .flex,
    .flex-basis-32;
}

SCSS