Flex grow

Syntax

Class
Properties
flex-grow-{value}
flex-grow: {value};

Parameters

value
<number>
<div class="t1 flex flex-row w-320 bg-c-white p-16 shadow-4"> <div class="t1 flex-grow-0 w-48 h-48 bg-c-blue mr-16"></div> <div class="t1 flex-grow-0 w-48 h-48 bg-c-green mr-16"></div> <div class="t1 flex-grow-0 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.
Disable growing flex item.
t1 flex-grow-0
.t1.flex-grow-0 { flex-grow: 0; }
Growing flex item by a factor of 2.
t1 flex-grow-2
.t1.flex-grow-2 { flex-grow: 2; }