Flex

Syntax

Class
Properties
flex-1
flex: 1 1 0%;
flex-auto
flex: 1 1 auto;
flex-initial
flex: 0 1 auto;
flex-none
flex: none;
flex-{grow}-{shrink}
flex: {grow} {shrink} 0%;
flex-{grow}-{shrink}-{basis}
flex: {grow} {shrink} {basis};

Parameters

grow
<float32 unsigned>
shrink
<float32 unsigned>
basis
<length-percentage unsigned>
<div class="t1 flex flex-row w-full bg-c-white p-8 shadow-4"> <div class="t1 w-48 h-48 m-8 bg-c-blue"></div> <div class="t1 flex-1 w-48 h-48 m-8 bg-c-red"></div> <div class="t1 w-48 h-48 m-8 bg-c-blue"></div> </div> <div class="t1 flex flex-row w-full bg-c-white p-8 shadow-4"> <div class="t1 w-128 h-48 m-8 bg-c-blue"></div> <div class="t1 flex-1 w-48 h-48 m-8 bg-c-red"></div> <div class="t1 w-128 h-48 m-8 bg-c-blue"></div> </div> <div class="t1 mt-8"> Try resizing this example -&gt; </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Stretch flex items to fit the available space, ignoring initial sizes.
t1 flex-1
.t1.flex-1 { flex: 1 1 0%; }
Stretch flex items to fit the available space, considering their initial sizes.
t1 flex-auto
.t1.flex-auto { flex: 1 1 auto; }
Shrink flex items to fit the available space if necessary, considering their initial sizes.
t1 flex-initial
.t1.flex-initial { flex: 0 1 auto; }
Do not grow or shrink.
t1 flex-none
.t1.flex-none { flex: none; }
Flex with 2 arguments.
t1 flex-1-2
.t1.flex-1-2 { flex: 1 2 0%; }
Flex with 3 arguments.
t1 flex-1-2-0%
.t1.flex-1-2-0\% { flex: 1 2 0%; }
Flex with 3 arguments, the flex-basis argument provided in pixel unit.
t1 flex-1-2-20px
.t1.flex-1-2-20px { flex: 1 2 20px; }
Flex with 3 arguments, the flex-basis being 0px. The CSS declaration uses 0%.
t1 flex-1-2-0px
.t1.flex-1-2-0px { flex: 1 2 0%; }
When using flex with 3 arguments, the unit must be provided for the flex-basis argument.
t1 flex-1-2-3
Error: invalid arguments passed to utility function [flex] in [flex-1-2-3]