Flex-grow vs Flex-basis in CSS: Key Differences and Usage

In CSS, flex-grow controls how much a flex item expands to fill available space, while flex-basis sets the initial size of the item before growing or shrinking. flex-grow is a ratio for extra space distribution, and flex-basis defines the starting size of the item.

Quick Comparison

Here is a quick side-by-side comparison of flex-grow and flex-basis to understand their main roles in flexbox layout.

Aspect	flex-grow	flex-basis
Purpose	Controls how much extra space a flex item takes	Sets the initial size of a flex item before growing or shrinking
Type of value	Number (unitless ratio)	Length (px, %, em) or auto
Default value	0 (no growth)	auto (size based on content)
Effect on layout	Distributes leftover space among items	Defines base size for flex calculations
Used for	Expanding items to fill container	Setting starting size regardless of content
Interaction	Works after flex-basis size is set	Determines starting point before flex-grow applies

Key Differences

flex-grow is a number that tells a flex item how much it should grow relative to other items when there is extra space in the container. For example, if one item has flex-grow: 2 and another has flex-grow: 1, the first item will get twice as much extra space.

On the other hand, flex-basis sets the starting size of the flex item before any growing or shrinking happens. It can be a fixed size like 100px, a percentage, or auto which means the size is based on the item's content.

In simple terms, flex-basis decides the base size of the item, and flex-grow decides how much bigger it can get if there is room. They work together: first the browser sets the size using flex-basis, then it adds extra space based on flex-grow.

Code Comparison

This example shows how flex-grow controls the expansion of flex items inside a container.

css

html, body {
  margin: 0;
  height: 100vh;
}
.container {
  display: flex;
  height: 100px;
  border: 2px solid #333;
}
.item {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
}
.item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}
.item3 {
  flex-grow: 1;
}

Output

A horizontal bar with three green boxes: the middle box is twice as wide as the first and third boxes because it has flex-grow: 2, while the others have flex-grow: 1.

flex-basis Equivalent

This example shows how flex-basis sets the initial size of flex items before any growing happens.

css

html, body {
  margin: 0;
  height: 100vh;
}
.container {
  display: flex;
  height: 100px;
  border: 2px solid #333;
}
.item {
  background-color: #2196F3;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
  flex-grow: 0;
}
.item1 {
  flex-basis: 100px;
}
.item2 {
  flex-basis: 200px;
}
.item3 {
  flex-basis: 150px;
}

Output

A horizontal bar with three blue boxes sized 100px, 200px, and 150px wide respectively, showing their initial sizes set by flex-basis.

When to Use Which

Choose flex-basis when you want to set a fixed or starting size for your flex items before any space distribution. This is useful when you want consistent base sizes regardless of container size.

Choose flex-grow when you want flex items to expand and fill leftover space proportionally. Use it when you want flexible layouts that adapt to container size changes by growing items.

Often, you use both together: flex-basis sets the starting size, and flex-grow controls how items share extra space.

Key Takeaways

flex-basis sets the initial size of a flex item before growing or shrinking.

flex-grow controls how much a flex item expands to fill available extra space.

Use flex-basis for fixed or base sizes and flex-grow for flexible expansion.

They work together: first size by flex-basis, then grow by flex-grow.

Default flex-grow is 0 (no growth), default flex-basis is auto (content size).