Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    flex-basis

    Summary

    The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item. The property determines the size of the content-box unless specified otherwise using box-sizing.

    • 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

    Syntax

    Formal syntax: content | <'width'>
    
    flex-basis: 10em      /* <'width'> */
    flex-basis: 3px       /* <'width'> */
    flex-basis: auto      /* <'width'> */
    flex-basis: content
    
    flex-basis: inherit
    

    Values

    <'width'>
    Defined as a number followed by a absolute unit such as px, mm or pt, or a percentage of the parent flex container main size property. Negative values are invalid.

    Examples

    element { 
      flex-basis: 18em;
    }
    

    Specifications

    Specification Status Comment
    CSS Flexible Box Layout Module
    The definition of 'flex-basis' in that specification.
    Candidate Recommendation Initial definition.

    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 11 [2] 12.10 Not supported
    auto 18.0 (18.0)
     
    21.0 11 12.10 Not supported
    content Not supported Not supported Not supported Not supported 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.

    [2] When a non-auto flex-basis is specified, Internet Explorer 10-11 (but not 12+) always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element. See Flexbug #7 for more info.

    See also

    Document Tags and Contributors

    Last updated by: Sebastianz,