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
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.