mozilla
Your Search Results

    flex-wrap

    Summary

    The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.

    See Using CSS flexible boxes for more properties and information.

    Syntax

    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
    
    /* Global values */
    flex-wrap: inherit;
    flex-wrap: initial;
    flex-wrap: unset;
    

    Values

    The following values are accepted:

    nowrap
    The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value.
    wrap
    The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.
    wrap-reverse
    Behaves the same as wrap but cross-start and cross-end are permuted.

    Formal syntax

    nowrap | wrap | wrap-reverse

    Examples

    element {
      flex-wrap: nowrap;
    }
    

    Specifications

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

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 28.0 bug 939901 21.0-webkit 11.0 12.10 6.1-webkit
    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Basic support 28.0 bug 939901 4.4 11.0 12.10 7.0-webkit

    See also

    Document Tags and Contributors

    Contributors to this page:
    Last updated by: Sebastianz,