The flex-basis CSS property describes the initial main size of the flex item before any free space is distributed according to the flex factors described in the flex property (flex-grow and flex-shrink).
- Initial value
- Applies to
- flex items
- Computed value
- as specified
- CSS Object Model Property
- relative to the main size of the flex container
- The flex item’s initial main size is determined by either the width or height property, whichever is in the main dimension, as determined by the flex-direction property. Note that the value of the width or height property itself may be auto, in which case the size is determined by the flex item’s contents.
- In a horizontal writing mode; percentage values of flex-basis are resolved against the flex item’s flex container, and if that containing block’s size is indefinite, the result is undefined.
- In a vertical writing mode; percentage values of flex-basis are resolved against the flex item’s flex container, and if that containing block’s size is indefinite, the result is undefined.
See flex examples for the use of this property in an example.
The best practice is to use (instead of this property) the flex shorthand property, as it correctly resets any unspecified flex components to accomodate common uses.
- CSS Flexible Box Layout Model
- Candidate Recommendation