flex-basis

Summary

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).

Overview table

Initial value: auto
Applies to: flex items
Inherited: No
Media: visual
Computed value: as specified
Animatable: Yes
CSS Object Model Property: flexBasis
Percentages: relative to the main size of the flex container

Syntax

flex-basis: auto
flex-basis: height
flex-basis: width

Values

auto: 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.
width: 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.
height: 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.

Examples

See flex examples for the use of this property in an example.

flex-basis: 60%;

Usage

 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.

Related specifications

CSS Flexible Box Layout Model: Candidate Recommendation