HTML & CSS - Mastery / Flexbox Mastery

Flex Grow, Shrink, and Basis

😵‍💫 Flex grow-shrink-basis

The three core properties that determine how flex items size themselves inside a Flex container are:

  • flex-grow: How items expand

  • flex-shrink: How items shrink

  • flex-basis: The item’s initial size

Together, they define how space is distributed among flex items.

🧱 Syntax

flex: 1 0 200px; 
/* short form for using flex grow, shrink and basis all together*/

🧱 HTML code to be used further

<div class="flex-container">
  <div class="flex-item item-0">Item 1</div>
  <div class="flex-item item-1">Item 2</div>
  <div class="flex-item item-2">Item 3</div>
</div>

This means:

  • Item can grow (value 1)

  • It will not shrink (0)

  • Starts at a base width of 200px

🔹 1. flex-grow

Controls how much a flex item can grow relative to others when extra space is available in the container.

  • flex-grow: 0 → the item won’t grow at all

  • flex-grow: 1 or more → the item can grow and fill extra space

  • If all items have flex-grow: 1, they share space equally

  • If one item has 2 and others have 1, it will get twice the space

  • The higher the number, the more space the item takes compared to others

🔹 2. flex-shrink

Controls how items shrink when there’s not enough space in the container.

  • flex-shrink: 0 → the item stays the same size (doesn’t shrink)

  • flex-shrink: 1 or more → the item can shrink to fit

  • Bigger numbers = shrinks more compared to others

🔹 3. flex-basis

Defines the initial size of a flex item before space distribution.

  • auto (default) → uses the content size or the set width

  • 0 → ignores content size, lets the item fully flex

  • px, %, em, etc. → sets a fixed starting size for the item

💡 Common Values:

Shorthand

Meaning

flex: 1

flex-grow: 1; flex-shrink: 1; flex-basis: 0%

flex: 0 1 auto

Default value

flex: 0 0 auto

Fixed-size item that doesn't grow or shrink

flex: 1 0 200px

Growable item starting from 200px width

🎯 Summary Table

Property

Role

Default

flex-grow

Can the item grow?

0

flex-shrink

Can the item shrink?

1

flex-basis

Initial size before flexing

auto

📌 Use flex shorthand for cleaner code and more responsive layouts.