Flex Basis

Flex Basis

flex-basis sets the initial size of a flex item before flex-grow and flex-shrink are applied. Think of it as the "ideal" width (or height in a column layout).

flex-basis vs width

Property	Behavior in Flexbox
width	Sets the width, but flex-basis takes priority
flex-basis	Sets the initial main-axis size before grow/shrink; overrides width

.item {
    width: 200px;
    flex-basis: 300px;
    /* flex-basis wins → item starts at 300px */
}

Common flex-basis Values

Value	Behavior
auto (default)	Uses the item's width or content size
0	Item starts at zero — all sizing comes from flex-grow
200px	Item starts at exactly 200px
33%	Item starts at 33% of the container width
content	Size based on the item's content

flex-basis: auto vs 0

This is a crucial distinction:

/* flex-basis: auto — grow distributes REMAINING space */
.item-a { flex-grow: 1; flex-basis: auto; width: 200px; }
.item-b { flex-grow: 1; flex-basis: auto; width: 100px; }
/* Item A gets more total width because it starts bigger */

/* flex-basis: 0 — grow distributes ALL space */
.item-a { flex-grow: 1; flex-basis: 0; }
.item-b { flex-grow: 1; flex-basis: 0; }
/* Both items end up exactly the same width */

When flex-basis: 0, items start at zero width, so all the container's space is distributed by flex-grow. This gives truly equal-width items.

The flex Shorthand

The flex shorthand combines flex-grow, flex-shrink, and flex-basis:

/* flex: grow shrink basis */
flex: 1 1 auto;   /* Grow, shrink, start at auto */
flex: 0 0 200px;  /* Don't grow, don't shrink, fixed 200px */
flex: 2 1 0;      /* Grow at 2x rate, shrink normally, start at 0 */

Common flex Shorthand Values

Shorthand	Equivalent	Use Case
flex: 1	flex: 1 1 0	Equal-width items that fill space
flex: auto	flex: 1 1 auto	Grow from content size
flex: none	flex: 0 0 auto	Fixed-size item (no grow, no shrink)
flex: 0 0 200px	—	Fixed 200px, no flex
flex: 1 1 300px	—	Start at 300px, grow/shrink from there

Responsive Grid Pattern

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.grid-item {
    flex: 1 1 300px;
    /* Each item wants to be 300px
       If there's room, multiple fit per row
       If not, they wrap
       Items on each row stretch equally to fill remaining space */
}

This single line of flex creates a fully responsive grid without any media queries!

Three-Column Layout

.three-col {
    display: flex;
    gap: 20px;
}

.col {
    flex: 1;  /* All three columns share space equally */
}

/* Or with a wider middle column: */
.col-left   { flex: 1; }
.col-center { flex: 2; }  /* Twice as wide as sides */
.col-right  { flex: 1; }

Key Takeaways

• flex-basis sets the initial size before grow/shrink are calculated
• flex-basis: 0 + flex-grow: 1 = truly equal-width items
• flex-basis: auto uses the item's content/width as the starting point
• The flex shorthand combines grow, shrink, and basis in one property
• flex: 1 is the most common shorthand — makes items fill space equally
• flex: 1 1 300px with flex-wrap: wrap creates a responsive grid