flex-grow
Quick Summary for flex-grow
The flex-grow CSS property sets the flex grow factor of a flex item's main size.
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 value0
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Computed valueas specified
Animation typea 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); } 
Result

Specifications

Specification
CSS Flexible Box Layout Module Level 1 # flex-grow-property

See also

CSS Flexbox Guide: Basic Concepts of Flexbox CSS Flexbox Guide: Controlling Ratios of flex items along the main axis `flex-grow` is weird. Or is it? article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Our brains are wired to find things we are looking for - if your always cynical or waiting for things to go wrong, then your life will reflect that. On the other hand, having a positive outlook on life will bring you joy and provide you with inspiration when you least expect it ☀️🍉🌴
Unknown
Random CSS Property

:enabled

The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.
:enabled css reference