CSS3 flex-wrap Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The flex-wrap CSS property specifies whether the flex items are forced into a single line or they wrap onto multiple lines or columns based on the space available in the flex container.
The following table summarizes the usages context and the version history of this property.
| Default value: | nowrap |
|---|---|
| Applies to: | Flex containers |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the flex-wrap property in action.
Example
Try this code ».flex-container {
/* Safari */
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
/* Standard syntax */
display: flex;
flex-wrap: nowrap;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
nowrap |
Specifies that all flex items are displayed in a single row or column which may cause the flex container to overflow. The overflow CSS property of the flex container determines whether the flex items are hidden, clipped, or scrollable. |
wrap |
Specifies that the flexible items will into multiple lines if necessary. |
wrap-reverse |
Behaves same as the wrap, but items will wrap in the reverse order. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element flex-wrap property. |
Browser Compatibility
The flex-wrap property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Multi-column Layouts.
Related properties: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, justify-content, min-height, min-width, order.
