Flex basis

Syntax

Class
Properties
flex-basis-{value}
flex-basis: {value};
flex-basis-auto
flex-basis: auto;

Parameters

value
<length-percentage unsigned>

When flex-basis-auto is used, the remaining free space is distributed between the flex items after their intrinsic sizes have been calculated.

When flex-basis-0 is used, the sizes of flex items are ignored and all the space is distributed between them.

<div class="t1 flex flex-row w-320 bg-c-white p-16 shadow-4"> <div class="t1 flex-grow-1 flex-basis-auto w-0 h-48 bg-c-blue mr-16"></div> <div class="t1 flex-grow-1 flex-basis-auto w-48 h-48 bg-c-green mr-16"></div> <div class="t1 flex-grow-1 flex-basis-auto w-48 h-48 bg-c-red"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Flex basis auto.
t1 flex-basis-auto
.t1.flex-basis-auto { flex-basis: auto; }
Flex basis 0.
t1 flex-basis-0
.t1.flex-basis-0 { flex-basis: 0; }
Flex basis in pixel unit.
t1 flex-basis-10px
.t1.flex-basis-10px { flex-basis: 10px; }
Flex basis in percent unit.
t1 flex-basis-10%
.t1.flex-basis-10\% { flex-basis: 10%; }
The unit must be provided.
t1 flex-basis-10
Error: invalid arguments passed to utility function [flex-basis] in [flex-basis-10] invalid arguments passed to utility function [flex] in [flex-basis-10]