Improve Responsiveness with flex-wrap in CSS

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;
}

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;
}

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

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 */
}

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.