COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

CSS Flex Grow

The CSS flex-grow property controls how much a Flex Item can grow when there is extra available space inside the Flex Container.

It is useful when you want Flex Items to automatically share the remaining space according to specific proportions.

What Is Flex Grow?

flex-grow defines the growth factor of a Flex Item.

When extra space is available inside the Flex Container, the browser distributes that space among Flex Items based on their flex-grow values.

The default value is 0.

Syntax

.item {
    flex-grow: number;
}

Default Value

.item {
    flex-grow: 0;
}

A value of 0 means the Flex Item will not grow to consume extra available space.

Flex Grow Diagram

Grow: 1

Grow: 2

The item with flex-grow: 2 receives twice the growth space of the item with flex-grow: 1.

Example 1: flex-grow: 1

When multiple Flex Items have flex-grow: 1, they can share the available extra space equally.

.item {
    flex-grow: 1;
}

Output

Item 1

Item 2

Item 3

Since all three items have the same growth factor, the available extra space is distributed equally among them.

Example 2: Different Flex Grow Values

Different flex-grow values create different proportions of the available space.

.item1 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

.item3 {
    flex-grow: 1;
}

The total growth factor is:

1 + 2 + 1 = 4

Therefore, Item 2 receives twice as much of the available growth space as Item 1 and Item 3.

Output

Item 1

Item 2

Item 3

Example 3: Three Different Growth Factors

.small {
    flex-grow: 1;
}

.medium {
    flex-grow: 2;
}

.large {
    flex-grow: 3;
}

The growth factors are 1 : 2 : 3.

The third item receives the largest share of the available extra space.

Output

Grow 1

Grow 2

Grow 3

How Flex Grow Works

Step 1

The browser identifies the available extra space inside the Flex Container.

Step 2

The browser calculates the total flex-grow factors of the Flex Items.

Step 3

The extra space is distributed according to those growth factors.

Flex Grow Values

Value	Meaning
0	The item does not grow.
1	The item receives one share of the available growth space.
2	The item receives two shares of the available growth space.
3	The item receives three shares of the available growth space.

Example 🌍

Flex Grow is useful when creating responsive layouts such as navigation bars, dashboards, pricing cards, and course cards.

.course {
    flex-grow: 1;
}

.featured-course {
    flex-grow: 2;
}

The normal course cards can share available space equally, while the featured course can receive twice the growth share.

Flex Grow vs Width

Property	Purpose
width	Defines the preferred width of an element.
flex-grow	Controls how the item uses available extra space.

Important: flex-grow works when the Flex Container has extra available space along its main axis. The default value is 0. A higher growth factor means the item receives a larger share of the available growth space.

Summary

The flex-grow property controls how Flex Items use extra available space. Its default value is 0. When multiple items have positive growth factors, the available space is distributed according to their relative flex-grow values.

← Previous: Order

Next: Flex Shrink →