flex-grow, flex-shrink & flex-basis

These three properties control how flex items size themselves within the container.

flex-grow

How much an item should grow relative to siblings when there is extra space. Default: 0.

flex-shrink

How much an item should shrink when there is not enough space. Default: 1.

flex-basis

The initial size of an item before growing/shrinking. Can be px, %, or auto.

Shorthand: flex

flex: grow shrink basis — Common patterns:

flex: 1 → equal width, fills space
flex: 0 0 200px → fixed 200px, won't grow or shrink
flex: 1 1 auto → grows and shrinks based on content

Example

.container {
  display: flex;
  gap: 12px;
}

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

/* Sidebar: fixed width, main grows */
.sidebar { flex: 0 0 260px; }
.main    { flex: 1; }

/* 2:1 ratio */
.large  { flex: 2; }
.small  { flex: 1; }

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned