The Flex Shorthand Property

If you’ve ever tried to line up boxes on a web page and got frustrated, you’re not alone. Flexbox is a CSS tool that makes layouts easier, and the flex shorthand property is one of its most useful features.

In this article, you’ll learn what the flex shorthand is, why it matters, and how to use it step-by-step. You don’t need any previous coding experience — we’ll go slowly, explain each term, and use small examples you can copy and try yourself.

---

What is Flexbox and the flex Property?

Flexbox (short for Flexible Box Layout) is a way to arrange elements (like boxes, cards, buttons) in a row or column. It makes things like equal-height columns and responsive layouts much easier.

To use Flexbox, you usually:

1. Turn a container into a flex container
2. Control how the items inside it behave

You turn a container into a flex container like this:

<style>
  .container {
    display: flex; /* Turn on Flexbox */
  }
</style>

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

That’s Flexbox in its simplest form. Now, the flex shorthand property controls how each item inside that container grows, shrinks, and how wide it wants to be.

---

The Three Parts of the flex Shorthand

The flex shorthand combines three separate properties into one line:

1. flex-grow – How much an item is allowed to grow
2. flex-shrink – How much an item is allowed to shrink
3. flex-basis – The starting size of the item

Written out, it looks like this:

.item {
  flex: flex-grow flex-shrink flex-basis;
}

For example:

.item {
  flex: 1 1 200px;
}

This means:

• 1 (flex-grow): it can grow to fill extra space
• 1 (flex-shrink): it can shrink if there’s not enough space
• 200px (flex-basis): it starts at 200 pixels wide

Don’t worry if this feels abstract right now. The next examples will make it clearer.

---

Example 1: Basic Flex Shorthand in Action

Let’s start with a very simple layout: three boxes in a row.

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

CSS

.container {
  display: flex;          /* Use Flexbox layout */
  border: 2px solid #333; /* Just so we can see the container */
}

.box {
  border: 1px solid #999;
  padding: 10px;
  text-align: center;
}

/* All boxes behave the same */
.box {
  flex: 1; /* shorthand for: flex: 1 1 0; */
}

What does flex: 1; do?

When you write flex: 1;, it’s a shortcut for:

flex: 1 1 0;

This means:

• flex-grow: 1 – each box can grow
• flex-shrink: 1 – each box can shrink
• flex-basis: 0 – each box starts from 0 width and then shares the space

Result: All three boxes share the available space equally, so they end up the same width.

Try it yourself

1. Open a new HTML file.
2. Copy the HTML and CSS above.
3. Open the file in your browser.
4. Resize the browser window and watch the boxes grow and shrink evenly.

---

Example 2: Making One Item Wider with flex-grow

Now let’s say you want Box 2 to be twice as wide as Boxes 1 and 3.

CSS

.container {
  display: flex;
  border: 2px solid #333;
}

.box {
  border: 1px solid #999;
  padding: 10px;
  text-align: center;
}

.box1 {
  flex: 1; /* grow = 1 */
}

.box2 {
  flex: 2; /* grow = 2 (twice as much space as .box1 and .box3) */
}

.box3 {
  flex: 1; /* grow = 1 */
}

Here we’re only using one value again (like flex: 1; and flex: 2;). Browsers treat that as:

• flex: 1; → flex: 1 1 0;
• flex: 2; → flex: 2 1 0;

So Box 2 gets twice as much free space as Box 1 and Box 3.

Result:

• Box 1: 1 share of the space
• Box 2: 2 shares of the space
• Box 3: 1 share of the space

Total shares = 4, so:

• Box 1 = 1/4 width
• Box 2 = 2/4 (1/2) width
• Box 3 = 1/4 width

Try it yourself

Change .box2 { flex: 3; } and reload the page. Notice how Box 2 becomes even wider compared to the others.

---

Example 3: Controlling Shrink and Basis

Sometimes you want items to start at a specific width but still be flexible. That’s when you use all three values.

Let’s say we want each box to start at 200px, but allow them to shrink if the screen is too narrow.

CSS

.container {
  display: flex;
  border: 2px solid #333;
}

.box {
  border: 1px solid #999;
  padding: 10px;
  text-align: center;
}

.box1, .box2, .box3 {
  flex: 1 1 200px; 
  /* grow: 1  → can grow
     shrink: 1 → can shrink
     basis: 200px → start at 200px wide */
}

What happens now?

• On wide screens: Each box starts at 200px, then they grow equally if there’s more room.
• On narrow screens: They’re allowed to shrink below 200px so they can fit.

Try it yourself

Change the flex-basis to 100px and reload. See how the initial size changes. Then set flex-basis to 30% to make each item start at 30% of the container.

---

Example 4: Preventing an Item from Shrinking

Sometimes you don’t want a certain item to get smaller, even on small screens. For example, maybe a button label should always stay readable.

Let’s make Box 2 never shrink.

CSS

.container {
  display: flex;
  border: 2px solid #333;
}

.box {
  border: 1px solid #999;
  padding: 10px;
  text-align: center;
}

.box1, .box3 {
  flex: 1 1 150px; /* can grow and shrink from 150px */
}

.box2 {
  flex: 1 0 200px; 
  /* grow: 1  → can grow
     shrink: 0 → CANNOT shrink
     basis: 200px → start at 200px wide */
}

Result:

• Box 2 will always be at least 200px wide.
• On very small screens, Box 1 and Box 3 will shrink first.

This is helpful when some content is more important and must stay readable.

---

Helpful Shortcuts and Defaults

Here are a few handy presets you’ll see often:

• flex: 1; → flex: 1 1 0; (fully flexible, shares space equally)
• flex: 0 0 auto; → don’t grow, don’t shrink, use the content size
• flex: 0 0 200px; → fixed 200px width (no grow, no shrink)
• flex: initial; → flex: 0 1 auto; (shrink if needed, don’t grow)

You don’t need to memorize these all at once. Start by using flex: 1; and then experiment with adding more values when you need more control.

---

Try It Yourself: A Simple Card Row

Let’s put it all together with a row of cards.

HTML

<div class="cards">
  <div class="card main">Main Card</div>
  <div class="card">Side Card 1</div>
  <div class="card">Side Card 2</div>
</div>

CSS

.cards {
  display: flex;
  gap: 10px;             /* space between cards */
}

.card {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  flex: 1 1 150px;       /* flexible cards, start at 150px */
}

.main {
  flex: 2 1 200px;       /* main card is larger and starts at 200px */
}

What to look for:

• The main card is larger than the others.
• All cards adjust nicely when you resize the window.

Your experiment

Try these tweaks, one at a time:

• Change .main { flex: 3 1 200px; } and see how much larger it gets.
• Change .card { flex: 1 0 150px; } and notice how the cards stop shrinking.
• Change .cards { flex-wrap: wrap; } (add this line) and see how cards move to the next line when there isn’t enough space.

Playing with small changes like this is one of the best ways to learn.

---

Quick Recap

You’ve just taken an important step in understanding Flexbox. Here’s what you learned:

• The flex shorthand combines three properties: flex-grow, flex-shrink, and flex-basis.
• flex: 1; is a simple way to make items share space equally.
• Changing the first number (grow) controls how much extra space each item gets.
• Using all three values (flex: grow shrink basis;) gives you fine control over growth, shrinking, and starting size.
• You can prevent shrinking with flex-shrink: 0 to protect important content.

Learning layout can feel tricky at first, but every small experiment builds your intuition. Keep copying simple examples, tweak the values, and watch what happens — you’ll be thinking in Flexbox before you know it.