A word of two about flexbox

skip to my use case

Flexbox was introduced in July 23, 2009! Yes, it’s been here for that long. It’s been designed, to help us create better layouts in our websites. Thanks to flexbox we can easily create flexible and responsive layouts. Our elements can be layed out vertically or horizontally and they can “flex” (grow or shrink) based on the properties we provide. Years go by, and i find myself coming back to flexbox instead of grid. Really, i almost always default to flexbox. Maybe because my job does not require for some complex layouts, i would only reach out for grid if i ever have to implement a complicated pattern. But in any case, both grid and flexbox allow us to control the order of content. Here’s a story about where i found flex-direction: row-reverse to be very useful especially when we have accessibility in mind.

Uses for flex-direction reverse ?

Flex direction row-reverse, column-reverse. Never ever had to use this in my life. You might be saying to yourself, me niter, where would it be useful? There are couple of scenarios. When you have an image with accompanying text beside it, and you need to quickly swap the layout, consider internationalization, such as adjusting for English to Arabic, that can be done easily with one CSS class (example assumes you rely on the flexbox layout):

Another really cool one is swapping acceding or descending order. I bet you may have never thought of this one before, that you can use CSS to swap between acceding and descending order. In this example i’ve used flex-direction: column-reverse

Isn’t that cool? I mean yeah in most cases you’d already have javascript do that for you, but being able to do that with one line of CSS is pretty cool too.

If you’re enjoying this post, why not subscribe to my newsletter? (opens new window) You’ll be the first to know when new content is published!

Where i found a use for flex-direction: row-reverse ?

Now, to my actual use case.

I had a task to change the layout of a page. Before you make any assumptions please keep in mind RTL languages. Designing and supporting these languages is not an easy task, but that’s a story for another time. The layout is very basic it’s a page with a form in it. Refer to the images below for the layout (not the real project but you get the idea). i know i know.. could have used better colours…

The task was to swap the button and the links.

default layout

You may think that’s just an easy job of swapping the html elements themselves? Yes, you can do that, but the issue lies in the accessibility implications. By changing the order of the elements, especially if those links are important, it could affect their meaning and make them harder to focus on for users who rely on accessibility tools. Essentially, we are breaking the flow here.

swapping HTML elements

While users can use the shortcuts to only access links on the page, if they are chronologically tabbing through, they might miss these links as we’ve changed the order of the elements. How to achieve this without breaking accessibility? This is where flex-direction: row-reverse plays a role.

using flex-direction: row-reverse

With this, we’ve achieved the desired layout and we kept accessibility in place with and without flex-direction: row-reverse.

To be fair, if you read about this feature on MDN (opens new window) you’ll notice a section about a11y, saying flex-direction:row-reverse OR flex-direction:column-reverse:

“will create a disconnect between the visual presentation of content and DOM order”

But i was just eager to use this “one liner” trick. And besides, it worked in my favour for the order.

Conclusion

The point is, even though some changes may seem simple at first glance, when you consider accessibility, you’ll often need to think more carefully. CSS can definitely impact accessibility! Sometimes the order of elements is really important to users that rely on accessibility tools. And, in those cases, we often need to get creative in finding the right solutions to the problems.