The **`flex-wrap`** property in #key# CSS: Cascade Style Sheets #key# is used to define whether we want to wrap flexible items or not. 



> There is no effect of this property on non-flexible items. 

# 
#  Syntax

---
```css
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
```
---

# 
## Property values

- **`nowrap`**: This is the default value. It's used to specify that the flex items don't wrap. 

- **`wrap`**: This identifies whether a flex item should wrap or not. 

- **`wrap-reverse`**: This specifies whether it is necessary that a flex item should wrap, and if it is, that the flex item should wrap in the reverse order.  

- **`initial`**: This sets the value to its default value.

- **`inherit`**: This inherits the property from its parent value.

##
## Code

The basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `flex-wrap` property is as follows:

.container 
{
  height: 200px;
  font: 100 24px/100px sans-serif;
  text-align: center;
  color: white;
  display: flex;
  flex-wrap: wrap;
}	
.container div 
{
  height: 50%;
  width: 50%;
}
.b1
{
  background: rgb(125, 220, 47);
}
.b2
{
  background: rgb(29, 146, 105);
}
.b3
{
  background: rgb(65, 144, 228);
}

codemirror

In this example, we can see that we have set the property of `flex-wrap` to `wrap`. 

The third box is in the next line because we have set the property to `wrap`. 

As a result of this, flex items are wrapped onto multiple lines. Otherwise, they are forced onto a single line.  

What is the CSS flex-wrap property?

Defines if flexible items wrap; options include nowrap, wrap, wrap-reverse, initial, and inherit.