In this section, we will learn what the flex-wrap property is and how to use it in CSS.

Click here to run the example of flex-wrap property.

CSS flex-wrap Property Definition and Usage

Let’s say we have a container with the width of 100px. Inside this container we have 5 elements with `min-width` set to 25px.

In this case no-matter what value is set for `flex-shrink` property, there will be an overflow because of `min-width` property is set to 25px for each flex-items and the total width is more than the container’s width.

But CSS provided a property named flex-wrap that can be applied to a flex-container and by which we can wrap flex-items into a new line (if `flex-direction` is set to “row”) or new column (if `flex-direction` is set to “column”) at the break of an overflow.

CSS flex-wrap Property Syntax

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

CSS flex-wrap Property Value

The values we set for `flex-wrap` are:

• nowrap: this is the default value and it won’t wrap the overflowed element into a new line or column.
• wrap: using this value, at the break of an overflow, flex-items will be wrapped into a new line or column depending on the value set for `flex-direction` property.
• wrap-reverse: This value acts exactly like “wrap” property, but in reverse mode.

Note: the two global values “initial” and “inherit” could also be used for this property.

Example: flex-wrap property in CSS

See the Pen flex-wrap property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

As you can see, the last item overflowed, even though we’ve set the `flex-shrink` property to 1 for each flex-item.

Now let’s apply the `flex-wrap` property to the container to see how it’ll wrap into a new line:

See the Pen the `flex-wrap` property to the container by Omid Dehghan (@enjoytutorials1) on CodePen.

Let’s apply the same example in column mode:

See the Pen apply the same example in column mode by Omid Dehghan (@enjoytutorials1) on CodePen.