flex-basis property CSS Reference

Definition and Usage

The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item.

• Initial auto
• Applies to flex items, including in-flow pseudo-elements
• Inherited no
• Percentages refer to the flex container's inner main size
• Media visual
• Computed Value as specified, with lengths made absolute
• Animatable yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
• Canonical order the length or percentage before the keyword, if both are present

Syntax

Formal syntax: <'width'>

flex-basis: value
flex-basis: inherit

Values

percentage

Computed value returns a percentage of the parent flex container main size property. Negative values are invalid.

absolute length

Defined as a number followed by a absolute unit such as px, mm or pt. Negative values are invalid.

initial

Refers to the default value of the property.

auto

The computed value of flex-basis equals the computed value of the main size of the flex item.

Note: Writing Modes Level 3 specification will introduce the following new keywords: min-content, max-content, fill-available and fit-content.

Note: flex-basis determines the size of the content-box unless specified otherwise using box-sizing.

Examples

element {
  flex-basis: 18em;
}

Compatibility

Desktop browsers

Mobile browsers