mozilla
Your Search Results

    flex-basis

    Summary

    The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item. This 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

    /* Specify <'width'> */
    flex-basis: 10em;      
    flex-basis: 3px;
    flex-basis: auto;
    
    /* Automatically size based on the flex item’s content */
    flex-basis: content;
    
    /* Global values */
    flex-basis: inherit;
    flex-basis: initial;
    flex-basis: unset;
    

    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.

    Formal syntax

    content | <'width'>
    

    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 7.0-webkit [3]
    auto 18.0 (18.0)
     
    21.0 11 12.10 7.0-webkit
    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.

    [3] Safari 7.0

    See also

    Document Tags and Contributors

    Contributors to this page:
    Last updated by: Sebastianz,