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-wrap

    Summary

    The CSS flex-wrap property specifies whether the children are forced into a single line or if the items can be flowed on multiple lines.

    See Using CSS flexible boxes for more properties and information.

    Syntax

    Formal syntax: nowrap | wrap | wrap-reverse
    
    flex-wrap: nowrap
    flex-wrap: wrap
    flex-wrap: wrap-reverse
    
    flex-wrap: inherit
    

    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.

    Examples

    element {
      flex-wrap: nowrap;
    }
    

    Specifications

    Specification Status Comment
    CSS Flexible Box Layout Module 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: Sheppy, scottrowe, ziyunfei, FredB, ethertank, kscarfone, teoli, SJW, yisi
    Last updated by: teoli,
    Hide Sidebar