CssHow-ToBeginner · 3 min read

How to Use Flex Shorthand in CSS: Simple Guide

Use the flex shorthand property in CSS to set flex-grow, flex-shrink, and flex-basis all at once. The syntax is flex: <flex-grow> <flex-shrink> <flex-basis>, where each part controls how a flex item grows, shrinks, and its initial size.

📐

Syntax

The flex shorthand combines three properties:

flex-grow: a number that defines how much the item will grow relative to others.
flex-shrink: a number that defines how much the item will shrink relative to others.
flex-basis: the initial size of the item before growing or shrinking, can be a length or auto.

All three can be set in one line using flex: <flex-grow> <flex-shrink> <flex-basis>.

css

flex: <flex-grow> <flex-shrink> <flex-basis>;

💻

Example

This example shows three boxes inside a flex container. Each box uses the flex shorthand to control how it grows and shrinks:

css

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  height: 100px;
  border: 2px solid #333;
}
.box {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.box1 {
  background-color: #f44336;
  flex: 1 1 100px; /* grow=1, shrink=1, basis=100px */
}
.box2 {
  background-color: #2196f3;
  flex: 2 1 150px; /* grow=2, shrink=1, basis=150px */
}
.box3 {
  background-color: #4caf50;
  flex: 1 2 100px; /* grow=1, shrink=2, basis=100px */
}

Output

⚠️

Common Pitfalls

Common mistakes when using flex shorthand include:

Omitting flex-shrink or flex-basis and expecting defaults to apply correctly.
Using only one or two values without knowing how CSS interprets them.
Setting flex-basis to auto unintentionally, which can cause unexpected sizing.

Remember, if you provide one value, it sets flex-grow and uses defaults for the others. Two values set flex-grow and flex-shrink. Three values set all three.

css

/* Wrong: only one value but expecting flex-basis to be 100px */
.box {
  flex: 1;
}

/* Right: specify all three values explicitly */
.box {
  flex: 1 1 100px;
}

📊

Quick Reference

Property	Description	Default Value
flex-grow	How much the item will grow relative to others	0
flex-shrink	How much the item will shrink relative to others	1
flex-basis	Initial size of the item before growing or shrinking	auto

✅

Key Takeaways

The flex shorthand sets flex-grow, flex-shrink, and flex-basis in one line.

Use three values for full control: flex-grow, flex-shrink, and flex-basis.

If you use fewer values, CSS applies defaults to missing parts.

flex-basis controls the starting size before growing or shrinking.

Always test your flex settings visually to avoid unexpected layouts.