flex-grow
Quick Summary for flex-grow
Code Usage for flex-grow
/* <number> values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-grow: initial; flex-grow: revert; flex-grow: unset;
More Details for flex-grow
flex-grow
The flex-grow
CSS property sets the flex grow factor of a flex item's main size.
Syntax
/* <number> values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-grow: initial; flex-grow: revert; flex-grow: unset;
The flex-grow
property is specified as a single <number>
.
Values
<number>
See <number>
. Negative values are invalid. Defaults to 0.
Description
This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
The main size is either width or height of the item which is dependent on the flex-direction
value.
The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors.
flex-grow
is used alongside the other flex properties flex-shrink
and flex-basis
, and normally defined using the flex
shorthand to ensure all values are set.
Formal definition
Initial value | 0 |
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Inherited | no |
Computed value | as specified |
Animation type | a number |
Formal syntax
<number>
Examples
Setting flex item grow factor
HTML<h4>This is a Flex-Grow</h4> <h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>
CSS #content { display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch; } .box { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 2; border: 3px solid rgba(0,0,0,.2); }
ResultSpecifications
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-grow-property |