flex-wrap property CSS Reference

---

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.

• Initial nowrap
• Applies to flex containers
• Inherited no
• Media visual
• Computed Value as specified
• Animatable no
• Canonical order the 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

element {
  flex-wrap: nowrap;
}

---

Compatibility

Desktop browsers

Mobile browsers