flex-grow, flex-shrink and flex-basis Explained

The flex Shorthand

Three properties control how a flex item grows or shrinks relative to its siblings: flex-grow, flex-shrink and flex-basis. They are usually written together as the flex shorthand.

.item {
  flex: 1 1 0; /* grow shrink basis */
}

flex-grow: Sharing Extra Space

When a flex container has more space than its items need, flex-grow decides how that leftover space is divided. A value of 0 (the default) means an item will not grow at all.

.sidebar { flex-grow: 0; } /* stays its natural size */
.main    { flex-grow: 1; } /* takes up all remaining space */

flex-shrink: Handling Not Enough Space

flex-shrink is the opposite case: when items together are wider than the container, this decides which items shrink to make them fit. A value of 0 prevents an item from shrinking at all, even if it causes overflow.

.icon { flex-shrink: 0; } /* never gets squished */
.label { flex-shrink: 1; } /* shrinks as needed */

flex-basis: The Starting Size

flex-basis sets an item's initial size before any growing or shrinking is applied - similar to width, but specifically for the main axis, and it takes priority over width when both are set.

Common Shorthand Values and What They Mean