While container properties control overall layout and alignment, flex item properties give you fine-grained control over individual items. The three core properties—flex-grow, flex-shrink, and flex-basis—determine how items expand to fill space, contract when space is limited, and establish their initial size. Together (usually via the flex shorthand), they create truly flexible, responsive layouts.
Flex Properties Overview
Flex items have three main properties that control their sizing behavior:
Flex Item Properties
| Property | Values | Description |
|---|---|---|
flex-grow | 0 (default), 1, 2, etc. | How much item grows to fill available space |
flex-shrink | 1 (default), 0, 2, etc. | How much item shrinks when space is limited |
flex-basis | auto (default), 200px, 50% | Initial size before growing or shrinking |
flex | 0 1 auto (default) | Shorthand for grow, shrink, and basis |
The Flex Sizing Algorithm
- Start with
flex-basis(or content size if auto) - If extra space: distribute according to
flex-grow - If not enough space: shrink according to
flex-shrink
/* Individual properties */
.item {
flex-grow: 0; /* Default - don't grow */
flex-shrink: 1; /* Default - can shrink */
flex-basis: auto; /* Default - based on content */
}
/* Shorthand (recommended) */
.item {
flex: <grow> <shrink> <basis>;
}
/* Common patterns */
.item {
flex: 1; /* flex: 1 1 0% - grow equally, can shrink */
flex: 0 0 200px; /* Fixed 200px, don't grow or shrink */
flex: 2; /* Grow twice as much as flex: 1 items */
}flex-grow
The flex-grow property determines how much an item will grow relative to other flex items when there's extra space in the container.
/* flex-grow values */
.item {
flex-grow: 0; /* Default - don't grow */
flex-grow: 1; /* Grow to fill available space */
flex-grow: 2; /* Grow twice as much as items with flex-grow: 1 */
}
/* All items grow equally */
.item {
flex-grow: 1; /* Each takes equal share of extra space */
}
/* One item grows more */
.item-1 {
flex-grow: 1;
}
.item-2 {
flex-grow: 2; /* Takes twice as much extra space */
}
.item-3 {
flex-grow: 1;
}flex-grow Examples
Understanding flex-grow Calculation
How flex-grow distributes extra space:
Container width: 600px
Items base size: 100px each (3 items = 300px total)
Extra space: 600px - 300px = 300px
flex-grow values: 1, 2, 1 (total = 4)
Distribution:
- Item 1: 100px + (300px × 1/4) = 175px
- Item 2: 100px + (300px × 2/4) = 250px
- Item 3: 100px + (300px × 1/4) = 175px
Key Point: flex-grow distributes extra space, not total space. An item with flex-grow: 2 doesn't become twice the size of an item with flex-grow: 1—it gets twice as much of the remaining space.
flex-shrink
The flex-shrink property determines how much an item will shrink relative to other flex items when there isn't enough space in the container.
/* flex-shrink values */
.item {
flex-shrink: 1; /* Default - can shrink */
flex-shrink: 0; /* Don't shrink */
flex-shrink: 2; /* Shrink twice as much as items with flex-shrink: 1 */
}
/* Prevent shrinking */
.fixed-item {
flex-shrink: 0; /* Maintains size even if container is small */
}
/* Allow shrinking */
.flexible-item {
flex-shrink: 1; /* Can shrink if needed */
}
/* Shrink more aggressively */
.aggressive-shrink {
flex-shrink: 2; /* Shrinks twice as fast */
}flex-shrink Examples
Practical flex-shrink Use Case
Toolbar with Smart Shrinking
🔒 Preventing Shrink:
Use flex-shrink: 0 for items that should maintain their size (like icons, avatars, or important labels). This is especially useful for navigation items, toolbars, and buttons where you don't want content to become unreadable when space is tight.
flex-basis
The flex-basis property sets the initial size of a flex item before remaining space is distributed. It's like width (or height in column direction), but for flex items.
/* flex-basis values */
.item {
flex-basis: auto; /* Default - based on content or width/height */
flex-basis: 200px; /* Start at 200px */
flex-basis: 50%; /* 50% of container */
flex-basis: 0; /* Start at 0, grow from there */
}
/* auto vs 0 */
.item-auto {
flex: 1 1 auto; /* Grow from content size */
}
.item-zero {
flex: 1 1 0; /* Grow from zero (equal sizes) */
}
/* Fixed size (with flex-grow: 0, flex-shrink: 0) */
.fixed {
flex-basis: 300px;
flex-grow: 0;
flex-shrink: 0;
/* Or shorthand: flex: 0 0 300px; */
}flex-basis Examples
flex-basis: auto vs 0
auto vs 0 Comparison
Important Difference: flex: 1 1 auto items grow from their content size (leading to unequal sizes with different content). flex: 1 1 0% items grow from zero, resulting in equal sizes regardless of content. Use flex: 1 (which equals flex: 1 1 0%) for equal-width columns.
flex Shorthand
The flex shorthand combines flex-grow, flex-shrink, and flex-basis. It's the recommended way to set flex properties.
/* Shorthand syntax */
.item {
flex: <grow> <shrink> <basis>;
}
/* Common patterns */
.item {
flex: 0 1 auto; /* Default - don't grow, can shrink, auto basis */
flex: 1; /* flex: 1 1 0% - grow equally, common pattern */
flex: auto; /* flex: 1 1 auto - grow from content size */
flex: none; /* flex: 0 0 auto - don't grow or shrink */
flex: 2; /* flex: 2 1 0% - grow twice as much */
}
/* One value - different meanings */
.item {
flex: 1; /* flex: 1 1 0% - grow equally */
flex: 200px; /* flex: 1 1 200px - start at 200px */
flex: auto; /* flex: 1 1 auto - keyword */
}
/* Two values */
.item {
flex: 1 2; /* flex: 1 2 0% - grow 1, shrink 2 */
flex: 1 200px; /* flex: 1 1 200px - grow 1, basis 200px */
}
/* Three values */
.item {
flex: 2 1 300px; /* grow 2, shrink 1, basis 300px */
}Common flex Shorthand Patterns
| Property | Values | Description |
|---|---|---|
flex: 1 | flex: 1 1 0% | Equal width, can grow and shrink |
flex: auto | flex: 1 1 auto | Grow from content size |
flex: none | flex: 0 0 auto | Fixed size, don't grow or shrink |
flex: 0 0 200px | flex: 0 0 200px | Fixed 200px width |
flex: 2 | flex: 2 1 0% | Grow twice as much as flex: 1 |
flex Shorthand Examples
Best Practice: Always use the flex shorthand instead of individual properties. It's more concise, sets sensible defaults, and is the recommended approach in the CSS specification. The most common pattern is flex: 1 for equal-width flexible items.
order Property
The order property controls the visual order of flex items without changing the HTML source order.
/* order values */
.item {
order: 0; /* Default - source order */
order: 1; /* Appears after items with order: 0 */
order: -1; /* Appears before items with order: 0 */
order: 999; /* Appears at the end */
}
/* Reorder items visually */
.item-1 {
order: 2; /* Third in visual order */
}
.item-2 {
order: 1; /* Second in visual order */
}
.item-3 {
order: 0; /* First in visual order */
}order Property Examples
Accessibility Warning: The order property only changes visual order, not DOM order. Screen readers and keyboard navigation still follow the HTML source order. Use order sparingly and avoid creating a mismatch between visual and DOM order that could confuse users.
Real-World Flex Layouts
Holy Grail Layout
Holy Grail Layout with Flexbox
Responsive Product Grid
Responsive Product Grid
Key Takeaways
- flex-grow: How much item grows to fill extra space (default: 0)
- flex-shrink: How much item shrinks when space is limited (default: 1)
- flex-basis: Initial size before growing/shrinking (default: auto)
- flex shorthand: Recommended way to set flex properties
flex: 1(equalsflex: 1 1 0%) creates equal-width itemsflex: auto(equalsflex: 1 1 auto) grows from content sizeflex: none(equalsflex: 0 0 auto) fixed sizeflex: 0 0 200pxcreates fixed 200px items- flex-grow distributes extra space proportionally
- flex-shrink: 0 prevents item from shrinking
- flex-basis: 0 with flex-grow creates equal sizes regardless of content
orderchanges visual order (use carefully for accessibility)
What's Next?
Congratulations! You've completed the Flexbox section and now have complete mastery of flexible box layout. You understand flex containers, alignment, and how items grow, shrink, and size themselves. Flexbox is one of the most important modern CSS features you'll use daily.
In the next section, CSS Grid, we'll explore the two-dimensional layout system that complements Flexbox. While Flexbox excels at one-dimensional layouts (rows OR columns), Grid handles complex two-dimensional layouts (rows AND columns simultaneously). You'll learn when to use Grid vs Flexbox and how to create sophisticated page layouts with ease.
Flexbox revolutionized CSS layout by making formerly difficult tasks trivial. With flex items, you can create truly flexible, responsive layouts that adapt perfectly to any screen size. Practice combining container and item properties to build beautiful, maintainable layouts!