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