Let’s Talk bout the flex-wrap Property

flex-wrap is a specific property that exists as part of the CSS flexbox module. Using this property, you can determine how flex items will be displayed and behave within a flex container when they don’t have enough space.

The flex-wrap property provides us with a quick way to make a flex container more responsive, and sometimes even eliminates the need for us to write or set breakpoints ourselves. But before we continue talking about this property, let’s say a few words about flexbox.

Flexbox allows us to create layouts and one-dimensional elements such as headers, footers, and navigation relatively easily.

For those who don’t know, there are two types of “boxes” in flexbox. One is the Flex Container, and the other is the Flex Item, which is a direct child of the same container. Turning any element into a flex container is easily done by adding the display: flex property to that element.

Now, with a flex container at our disposal, we can declare the flex-wrap property on it to control the behavior of those flex items, which are the direct children of the container:

.container {
  display: flex;
  flex-wrap: wrap;
}

flex-wrap is applied only to the flex container and is not inherited downward in the hierarchy to the elements within the container, meaning those flex items.

Values of the flex-wrap property

The flex-wrap property has three possible values:

nowrap: This is the default value, so there’s no need to specifically define it. In this case, the flex items will always stay in the same row and won’t wrap to new rows.

wrap: Allows flex items to wrap to new rows if there isn’t enough space in the first row. Items without space will move to the lower left part of the container by default (in LTR* sites).

wrap-reverse: Creates the reverse effect of the above. Instead of the items wrapping to the lower left, they will move to a new row above the first row, meaning the upper left part of the container.

*The behavior on Hebrew or RTL websites will be reversed. For wrap, items will move to the lower right part of the container, and for wrap-reverse, items will move to the upper right part.

Default behavior of flex-wrap

Let’s take a moment to see how a non-flex container with a few elements inside it looks like. Notice that each child is in its own row by default:

But if we turn this into a flex container, all the children (flex items) will neatly arrange in a single row as shown in the next example:

The same elements will stay in a single row even if there isn’t enough space in the container. If we shrink the container, or alternatively enlarge the elements themselves, they will move outside the container sooner or later.

And here’s where the flex-wrap property comes in, allowing us to determine whether those elements should wrap to new rows when there’s no space in the container or not. Let’s explain this with an example…

It’s worth mentioning again – flex-wrap is relevant only when the elements within the container don’t fit in a single row, meaning flex items don’t have enough space in the container itself.

The flex-wrap Property in Action

Play with the following example and use the slider to increase the width of the elements until there’s no more space for them in the container.

flex-wrap: no-wrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

Simple, right? flex-wrap is a very straightforward CSS property that’s easily understandable, unlike many others.

The use of wrap-reverse isn’t common, but it’s still nice to have it in our toolbox… 🙂

Appendix: Love Shortcuts? Meet flex-flow

It’s worth mentioning in this post that flex-wrap is one part of the flex-flow property. The flex-flow property allows us to swap both the flex-wrap and flex-direction properties together and save one line of code 🙂

In short, if you don’t know (and didn’t follow the link in the previous paragraph), the flex-direction property determines whether the children in the container will be arranged in a row or a column. The values for this property are row, column, column-reverse, and row-reverse.

So, for our purpose, these two properties:

.flex-container {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

Can be written concisely using flex-flow as follows:

.flex-container {
  flex-flow: row-reverse wrap-reverse;
}

And that’s it. Comments, questions, and criticisms are welcome, of course… 🙂