flex-wrap property

Definition and Usage

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.

• Initialnowrap
• Applies toflex containers
• Inheritedno
• Mediavisual
• Computed Valueas specified
• Animatableno
• Canonical orderthe unique non-ambiguous order defined by the formal grammar

---

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

---

Compatibility

Desktop browsers

Mobile browsers