CSS Flexbox Wrap-Reverse

When building a website you use Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) to specify the structure and style of your website page respectively. Today we will be talking about the flex-wrap wrap-reverse CSS feature available with the Flexible Box Layout Module commonly known as flexbox. The wrap-reverse value is one of 3 values accepted by the flex-wrap property. The flex-wrap property allows you to control how content on the page wraps (or doesn’t wrap) for various types of page widths such as mobile(vertical) vs. desktop(horizontal).

Overview

The wrap-reverse value of the flex-wrap property is a really cool feature as it allows you to tell the browser that you don’t want your content to wrap from a top down perspective. A top down perspective is when things on the left get pushed to the top as the view port width decreases and things on the right fall underneath. Instead, when you specify wrap-reverse, the items on the right go on top and the items on the left go on the bottom.

Problem Statement

Now you may be asking when would you ever want to have the item on the right go on top. There are a number of cases but the one I want to talk about today is when you have a design where there is an image that is accompanied by text in a left to right and then right to left layout. Consider the following example, a website that we offers three primary services; websites, software and consulting. The websites section has an image on the left and text with a button on the right. The software section has the text and button on the left with the image on the right. The consulting section switches back and has the image on the left with the text and button on the right. This looks great on a full desktop screen as shown in the two examples here.

But what happens when the website is viewed on a mobile screen? The default behavior is to have whatever is on the left be placed above whatever is on the right as the following two screenshots demonstrate. In my opinion this is a sub-optimal design due to it’s now inconsistent user experience. The user first sees the website section with the image on the top, then the text but when they get to the software section there is more text and the an image.

Solution

Here is where the wrap-reverse value for the flex-wrap property comes into play. With wrap-reverse, you can tell the browser that you want the image to come first on the software section of the page even though it’s on the right in the desktop page design. The code is extremely simple, in html element where the row is that contains the items that you want to reverse you specify the follow CSS:

.row {
  display: flex;
  flex-wrap: wrap-reverse;
}

And the result will be that when viewed in a vertical layout the software section will now have the image on top followed by the text in a layout that is consistent with both the websites and consulting sections. This is a much cleaner design and produces a much more satisfying user experience.