Flex Item Properties: Grow, Shrink, and Basis

If you’ve ever tried to line things up in a row and make them resize nicely on different screens, you’ve already felt why Flexbox is so useful. In this article, you’ll learn three key flex item properties: flex-grow, flex-shrink, and flex-basis.

By the end, you’ll be able to:

Make boxes expand to fill extra space
Control how items shrink on smaller screens
Set starting sizes that still stay flexible

You don’t need any previous coding experience. We’ll walk through it step-by-step with short, friendly examples.

Step 1: Set up a simple Flexbox container

Before we can use flex item properties, we need a parent element that uses Flexbox. This parent is often called the flex container, and the elements inside it are flex items.

Create a basic HTML file like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Flex Item Basics</title>
  <style>
    .container {
      display: flex;           /* Turn this into a flex container */
      border: 2px solid #333;  /* Just to see the container boundary */
      padding: 10px;
      gap: 10px;               /* Space between items */
    }

    .item {
      background: lightblue;
      padding: 20px;
      text-align: center;
      border: 1px solid #0077aa;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

What this does:

The .container uses display: flex, so its children (.item) are now flex items.
The items sit in a row by default and share space equally (for now).

Try it yourself: Open this file in your browser. Resize the browser window and see how the three boxes stay in a row and adjust slightly.

Next, we’ll control how they adjust using grow, shrink, and basis.

Step 2: Make items grow with `flex-grow`

flex-grow controls how much a flex item expands to fill extra space in the container. Think of it as a “share of extra room” number.

flex-grow: 0 → Don’t grow (default)
flex-grow: 1 → Take 1 share of extra space
flex-grow: 2 → Take 2 shares of extra space (twice as much as 1)

Let’s make one item grow more than the others.

<style>
  .container {
    display: flex;
    border: 2px solid #333;
    padding: 10px;
    gap: 10px;
  }

  .item {
    background: lightblue;
    padding: 20px;
    text-align: center;
    border: 1px solid #0077aa;
  }

  .grow-1 {
    flex-grow: 1;    /* Can grow and take extra space */
  }

  .grow-2 {
    flex-grow: 2;    /* Grows twice as much as .grow-1 */
  }
</style>

<div class="container">
  <div class="item grow-1">A</div>
  <div class="item grow-2">B</div>
  <div class="item grow-1">C</div>
</div>

What to expect:

Item B will be wider than A and C.
Because B has flex-grow: 2, it takes double the extra space compared to A and C (flex-grow: 1).

So if there is extra room:

A gets 1 share
B gets 2 shares
C gets 1 share

Total shares = 4. B ends up taking about half of the free space, while A and C share the other half.

Try it yourself: Change B’s flex-grow to 3 or 4 and refresh. Watch how B dominates more space as the number increases.

Step 3: Control shrinking with `flex-shrink`

When the container becomes too small to fit all items at their preferred size, Flexbox will shrink them. flex-shrink tells the browser how much an item is allowed to shrink.

flex-shrink: 1 → Can shrink when needed (default)
flex-shrink: 0 → Don’t shrink at all

Let’s see this in action.

<style>
  .container {
    display: flex;
    border: 2px solid #333;
    padding: 10px;
    gap: 10px;
    width: 400px;          /* Fixed small width so items must compete for space */
  }

  .item {
    background: lightgreen;
    padding: 20px;
    text-align: center;
    border: 1px solid #228833;
    width: 200px;          /* Each item would like to be 200px wide */
  }

  .no-shrink {
    flex-shrink: 0;        /* This item refuses to shrink */
  }

  .can-shrink {
    flex-shrink: 1;        /* These items are allowed to shrink */
  }
</style>

<div class="container">
  <div class="item no-shrink">1</div>
  <div class="item can-shrink">2</div>
  <div class="item can-shrink">3</div>
</div>

What’s happening:

The container width is 400px.
Each item wants to be 200px, so total desired width = 600px.
There isn’t enough space, so items must shrink.

Because item 1 has flex-shrink: 0, it tries not to shrink. Items 2 and 3 will shrink more to make room.

You may see:

Item 1 stays closer to 200px.
Items 2 and 3 become much narrower.

Try it yourself: Switch the classes so item 3 becomes no-shrink and item 1 is can-shrink. See how the protected item changes and how that affects the layout.

This property is powerful when you have an element (like a logo or important label) that should not become too tiny.

Step 4: Set starting size with `flex-basis`

flex-basis controls the starting size of a flex item before growing or shrinking happens. You can think of it as the “preferred width” in a row layout.

Common values:

flex-basis: auto → Use content or set width (default)
flex-basis: 0 → Start from 0; let flex-grow fully decide size
A length like 200px or 30% → Start from that size

Let’s give each item a different flex-basis.

<style>
  .container {
    display: flex;
    border: 2px solid #333;
    padding: 10px;
    gap: 10px;
  }

  .item {
    background: #ffd580;    /* light orange */
    padding: 20px;
    text-align: center;
    border: 1px solid #cc8400;
  }

  .basis-small {
    flex-basis: 100px;      /* Prefers to start small */
  }

  .basis-medium {
    flex-basis: 200px;      /* Medium starting size */
  }

  .basis-large {
    flex-basis: 300px;      /* Large starting size */
  }
</style>

<div class="container">
  <div class="item basis-small">Small</div>
  <div class="item basis-medium">Medium</div>
  <div class="item basis-large">Large</div>
</div>

What you’ll see:

The “Small” item will be the narrowest.
“Medium” will be wider.
“Large” will be the widest.

If there is extra space, items may still grow depending on flex-grow. If there isn’t enough space, they may shrink based on flex-shrink.

Try it yourself: Add flex-grow: 1; to .item so all items can grow. Then resize the browser. You’ll notice they still respect their starting size differences but share extra room.

Step 5: Use the shorthand `flex` property

Typing flex-grow, flex-shrink, and flex-basis separately can get a bit long. You can use the shorthand property flex to set all three at once:

flex: grow shrink basis;

For example:

.item-1 {
  flex: 1 1 150px;   /* grow: 1, shrink: 1, basis: 150px */
}

.item-2 {
  flex: 2 1 150px;   /* grow twice as much as item-1 */
}

There’s also a very common pattern:

flex: 1;  /* same as flex: 1 1 0; in most browsers */

This means:

Grow: 1 → item can grow
Shrink: 1 → item can shrink
Basis: 0 → start from 0 and share space evenly

Try replacing your earlier rules with:

.item {
  flex: 1;            /* All items share space evenly */
}

.item-wide {
  flex: 2;            /* Shares twice as much as .item */
}

Place class="item item-wide" on one of your items and see how it becomes wider.

Try it yourself: Build a simple responsive row

Let’s put it all together and create a simple layout row: a logo, a menu, and a button.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Flex Row Example</title>
  <style>
    .header {
      display: flex;
      border: 2px solid #333;
      padding: 10px;
      gap: 10px;
    }

    .logo {
      background: #e0f7ff;
      flex: 0 0 120px;   /* Don't grow, don't shrink, basis 120px */
      text-align: center;
      padding: 10px;
    }

    .menu {
      background: #e6ffe0;
      flex: 1 1 200px;   /* Can grow and shrink, starts at 200px */
      text-align: center;
      padding: 10px;
    }

    .button {
      background: #ffe0f0;
      flex: 0 0 100px;   /* Fixed size button area */
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="logo">Logo</div>
    <div class="menu">Menu links</div>
    <div class="button">Sign up</div>
  </div>
</body>
</html>

What this does:

The logo and button keep their sizes (flex: 0 0 ...) and don’t stretch.
The menu (flex: 1 1 200px) grows and shrinks to use available space between them.

Resize the browser window:

The menu widens on large screens.
The menu shrinks on small screens, but the logo and button remain readable.

You’ve just built a simple responsive header using flex-grow, flex-shrink, and flex-basis.

Quick recap & what’s next

You’ve learned how three flex item properties work together:

flex-grow – Controls how much an item expands when there is extra space.
flex-shrink – Controls how much an item shrinks when there isn’t enough space.
flex-basis – Sets the item’s starting size before growing or shrinking.
flex shorthand – Lets you set all three in one line: flex: grow shrink basis;.

If you’ve made it this far, that’s a big win. Even many intermediate developers get confused by these properties, and you’ve already experimented with them.

Next steps:

Play with different flex values in the last example (change numbers, use percentages).
Try adding more items and see how they share space.
Look up other Flexbox properties like justify-content and align-items to control alignment.

Keep experimenting a little each day. With practice, these flex properties will start to feel natural, and you’ll be able to build clean, responsive layouts with confidence.

Mudzinga