While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
You can help us out by using the “report an issue” button at the bottom of the tutorial.
Introduction
The flex-wrap
property is a quick way to make parent elements more responsive on various screen sizes. As with flexbox in general, it simplifies page layouts so you don’t have to manually set breakpoints or manage the page overflow yourself.
Flexbox and Managing Element Wrapping
flex-wrap
is a property specific to the flexbox (or “flexible box”) module in CSS. Flexbox is a CSS layout model that manages how child elements are displayed in a parent element. This means flexbox can be useful for general page layout (like header, nav, footer, etc). More importantly, though, it can be applied to any element on the page that has child elements.
div.parent {
display: flex;
}
Making an element a flex
container is as simple as adding display: flex;
to its CSS declarations.
Once there’s a flex
container, flex-wrap
can be declared on that same parent element to determine how to handle child elements that do not fit on one line by default.
div.parent {
display: flex;
flex-wrap: wrap;
}
The parent element must be made a flex container before flex-wrap can be applied. The flex-wrap property gets applied to the flex container only (not the child elements).
Default Setting for flex-wrap
By default, a flex
container will try to fit its child elements on one line. This is also known as nowrap
for the flex-wrap
property.
For this example, let’s first start with a non-flex container where the children–block elements– will each be on a new line:
If we make the parent element a flex
container, the children will all go on one line.
.flex-container {
display: flex;
flex-wrap: nowrap;
}
The default flex-wrap setting for flex containers is “no-wrap”. That means you don’t need to explicitly declare it like we did above.
Now we have our child elements on one line but, even if your window doesn’t have enough room for them, the child elements will stay on one line. As the window size changes, the child elements will continue to squish together until they eventually overflow the parent element.
So, how do we fix this? With flex-wrap
!
Get to Know Your flex-wrap Options
There are three valid values for the flex-wrap
property:
- nowrap: This is the default value for
flex
containers, so it does not need to be explicitly declared unless you’re overriding other styles. Child elements will always stay on one line. - wrap: Using
wrap
will allow your child elements to wrap to additional lines when they no longer fit on the initial line. The element(s) that don’t fit will wrap to the bottom-left in the parent element. - wrap-reverse: This will cause the opposite effect of
wrap
. Instead of wrapping the overflowing element(s) to the bottom-left, it will wrap to a new line above the first child elements at the top-left of the parent.
To see the difference between wrap
and wrap-reverse
, compare the following two examples by resizing your window:
.flex-container {
display: flex;
flex-wrap: wrap;
}
This first example has overflowing elements going to a new line below the first child elements.
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
This second example does the opposite and wraps the overflowing elements above the first child elements. wrap-reverse
is less common to use but it’s still good to have in your CSS toolkit. 🥳
Flexbox Shorthand: flex-flow
If you’re someone who prefers to write your code on as few lines as possible, you’ll be happy to know flex-wrap
is one part of the flexbox shorthand flex-flow
.
flex-flow
is a flexbox property that replaces flex-wrap
and flex-direction
.
Quick Intro to flex-direction
flex-direction
determines if your child elements should be in a row or column. The four options are: row
, column
, column-reverse
, and row-reverse
. The default value for flex-direction is row
.
Using flex-flow
flex-flow
declares the flex-direction
of the parent element first and the flex-wrap
value second. It should only be used if you need to explicitly declare the flex-direction
and flex-wrap
to differ from the default values.
This means you can write these flex properties either like this:
.backwards-flex-container {
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
}
Or with the flex-flow
shorthand to get the same effect:
.backwards-flex-container {
flex-flow: row-reverse wrap-reverse;
}
This “backwards” example will have the child elements in a row but in the reversed order (the flex-direction
). It will also have the overflowing children wrap to a new row above the first row. ✨
flex-flow is the only flexbox shorthand that specifically includes flex-wrap but there are many other ones. If you prefer shorthand, most flexbox properties have shorthand options! 💅
Browser Support
In general, flexbox and flex-wrap
are very well-supported in all modern browsers. Even Internet Explorer (IE) has partial support for flexbox and flex-wrap
after IE9.
Flexbox Prefixes
Using prefixes for flexbox and flex-wrap
is less common these days and whether you use them will depend on which versions of browsers you’re trying to support.
.parent {
display: flex;
display: -webkit-flex; /* old versions of Chrome/Safari/Opera */
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */
}
Note that flex-wrap is one property of flexbox that is specifically not supported by some old versions of browsers, like Firefox.
To be sure if prefixes are needed, check Can I Use for the most current information on browser support, especially if you’re supporting old versions of browsers.