Flex Basis Property
Last updated: 2026-09-13
flex-basis Flex Basis Property
The flex-basis property sets the initial main size of a flex item before the remaining space is distributed - the item’s “ideal size”. Its default value is auto, which sizes the item from its content or from a set width/height. When a specific length is used, the item starts from that size and then grows or shrinks according to flex-grow and flex-shrink.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
flex-basis: auto | content | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | content | Keyword | Determined by auto or content |
<length> | <percentage> | Type | Fixed base size |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-basis | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： When flex-basis is 0, all items start from a base size of 0 and the whole space is distributed purely by flex-grow - the standard recipe for equal-width column layouts.
Important： flex-basis has higher priority than width/height but lower than max-width/max-height and min-width/min-height. When both flex-basis and width are set, flex-basis wins.
❓ FAQ
QWhat is the difference between flex-basis and width?
AIn a flex layout flex-basis has higher priority than width: it determines the item’s initial size on the main axis and participates in the grow/shrink computation, while width only applies when flex-basis is auto. flex-basis also feeds the base size into flex-grow and flex-shrink, which a plain width never does. It is recommended to define the base size of flex items with flex-basis and leave width for non-flex contexts.
QWhat is the difference between flex-basis: auto and flex-basis: content?
Aauto sizes the item from its content or from an explicit width/height, whichever applies; content sizes it purely from the content, ignoring any width/height settings. The content keyword has weaker browser support and can behave differently when the item has no text or contains replaced content, so auto is the recommended choice in real projects - its behavior is sufficient in most situations. If you truly need content-based sizing that auto cannot express, test the content keyword against your target browsers first.
QWhat is the difference between flex-basis: 0 and flex-basis: auto?
Aflex-basis: auto uses the content or width as the base size, so items with different content start at different widths and only the leftover space is shared by flex-grow. flex-basis: 0 zeroes the base width, so the whole space is distributed proportionally and the columns come out strictly equal. flex: 1 expands to 1 1 0% while flex: auto expands to 1 1 auto; the two behave very differently.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Flex Shorthand
Shorthand for flex-grow, flex-shrink and flex-basis
Flex Grow
Controls how much a flex item grows
