auto, the default, uses the item's own explicit width, in a row container, or height, in a column container, if one is set, or falls back to the item's natural content-based size if not — a specific length or percentage value instead overrides both of those, establishing a fixed initial size that flex-grow and flex-shrink then further adjust based on the container's actual available space. flex-basis, flex-grow, and flex-shrink are commonly combined into the flex shorthand property, and flex: 1 specifically is a very common shorthand equivalent to flex-grow: 1, flex-shrink: 1, flex-basis: 0%, telling an item to grow and shrink freely starting from essentially no initial base size.
1Understanding Flex-basis
auto, the default, uses the item's own explicit width, in a row container, or height, in a column container, if one is set, or falls back to the item's natural content-based size if not — a specific length or percentage value instead overrides both of those, establishing a fixed initial size that flex-grow and flex-shrink then further adjust based on the container's actual available space. flex-basis, flex-grow, and flex-shrink are commonly combined into the flex shorthand property, and flex: 1 specifically is a very common shorthand equivalent to flex-grow: 1, flex-shrink: 1, flex-basis: 0%, telling an item to grow and shrink freely starting from essentially no initial base size.
flex-basis, not width, is technically the property that establishes a flex item's initial main-axis size before flex-grow/flex-shrink adjustments — width still generally works as a fallback when flex-basis is left at its default auto value, but understanding this distinction matters once you're troubleshooting more complex flex sizing behavior.
.item {
flex: 1;
}
/* equivalent to: flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */2Practical Example
Here is a real-world application of Flex-basis showing how it is used in production CSS code.
.sidebar {
flex: 0 0 250px;
}
/* flex-grow: 0; flex-shrink: 0; flex-basis: 250px; */3Best Practices
Follow these guidelines when working with Flex-basis:
1. Use flex-basis, often via the flex shorthand, to set a flex item's intended starting size, rather than relying solely on width/height, once you need precise control interacting with flex-grow/flex-shrink
2. Use the flex: 1 shorthand, equivalent to flex-grow: 1, flex-shrink: 1, flex-basis: 0%, for items that should grow and shrink freely from essentially no fixed starting size
3. Set an explicit flex-basis value rather than leaving it at auto whenever you need flex-grow/flex-shrink calculations to start from a specific, known size rather than each item's natural content size
Tip: flex-basis, not width, is technically the property that establishes a flex item's initial main-axis size before flex-grow/flex-shrink adjustments — width still generally works as a fallback when flex-basis is left at its default auto value, but understanding this distinction matters once you're troubleshooting more complex flex sizing behavior.
.item {
flex: 1;
}
/* equivalent to: flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */