## CSS flex-wrap Property
The `flex-wrap` property in CSS specifies whether flex items should wrap onto multiple lines or stay on a single line. It also controls the direction in which the new lines are stacked.
> **Note:** The `flex-wrap` property only works on elements that are flex containers (i.e., elements with `display: flex` or `display: inline-flex`).
---
## Quick Example
Allow flex items to wrap onto a new line when necessary:
```css
.flex-container {
display: flex;
flex-wrap: wrap;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the property. Numbers followed by `-webkit-`, `-ms-`, or `-moz-` represent the first version that supported the property with a vendor prefix.
| Property | Chrome | Edge / IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **flex-wrap** | 29.0
21.0 `-webkit-` | 11.0
10.0 `-ms-` | 28.0
18.0 `-moz-` | 9.0
6.1 `-webkit-` | 17.0 |
---
## Definition and Usage
By default, flex items will all try to fit onto one single line. You can change this behavior and allow the items to wrap onto multiple lines with the `flex-wrap` property.
### Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value:** | `nowrap` |
| **Inherited:** | No |
| **Animatable:** | No |
| **CSS Version:** | CSS3 |
| **JavaScript Syntax:** | `object.style.flexWrap = "wrap"` |
---
## CSS Syntax
```css
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `nowrap` | **Default**. Specifies that the flex items will not wrap. They will all try to fit on a single line, which may cause them to shrink or overflow the container. |
| `wrap` | Specifies that the flex items will wrap onto multiple lines from top to bottom (or left to right in vertical layouts) if necessary. |
| `wrap-reverse` | Specifies that the flex items will wrap onto multiple lines if necessary, but in the reverse order (from bottom to top). |
| `initial` | Sets this property to its default value (`nowrap`). |
| `inherit` | Inherits this property from its parent element. |
---
## Code Examples and Visualizations
### 1. No Wrapping (`nowrap`)
This is the default behavior. All items are forced into a single line, even if they overflow the container.
```html
```
```css
.nowrap-container {
display: flex;
flex-wrap: nowrap; /* Items will shrink or overflow */
width: 300px;
border: 2px solid #333;
}
.item {
width: 100px; /* Total width of items (400px) exceeds container width (300px) */
background-color: #f1f1f1;
margin: 5px;
text-align: center;
}
```
### 2. Standard Wrapping (`wrap`)
Items wrap onto a new line when there is not enough space on the current line.
```css
.wrap-container {
display: flex;
flex-wrap: wrap; /* Items wrap to the next line */
width: 300px;
border: 2px solid #333;
}
```
### 3. Reverse Wrapping (`wrap-reverse`)
Items wrap onto a new line, but the wrap direction is reversed. The next line will appear *above* the current line.
```css
.wrap-reverse-container {
display: flex;
flex-wrap: wrap-reverse; /* Items wrap upwards */
width: 300px;
border: 2px solid #333;
}
```
---
## Important Considerations
* **Interaction with `flex-direction`**: The wrapping direction is relative to the main axis defined by `flex-direction`. If `flex-direction` is set to `column`, `flex-wrap` will wrap items into new columns (left-to-right or right-to-left) rather than rows.
* **Shorthand Property**: You can define both `flex-direction` and `flex-wrap` in a single property using the `flex-flow` shorthand. For example:
```css
/* flex-flow: */
flex-flow: row wrap;
```
---
## Related Articles
* CSS Reference: (css3-pr-flex.html)
* CSS Reference: (css3-pr-flex-direction.html)
* CSS Reference: (css3-pr-flex-flow.html)
* CSS Reference: (css3-pr-flex-grow.html)
* CSS Reference: (css3-pr-flex-shrink.html)
* CSS Reference: (css3-pr-flex-basis.html)
YouTip