flex-basis

Summary

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

  • Initial value 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

See Using CSS flexible boxes for more properties and information.

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;
}

Specifications

Specification Status Comment
CSS Flexible Box Layout Module Candidate Recommendation  

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0) (behind a pref) [1]
22.0 (22.0)
21.0-webkit Not supported 12.10 Not supported
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? Not supported 12.10 Not supported

[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Firefox supports multi-line flexbox since Firefox 28.

See also

Document Tags and Contributors

Contributors to this page: Sheppy, scottrowe, ethertank, FredB, m_gol, kscarfone, teoli, SJW
Last updated by: SJW,
Hide Sidebar