As antsy as I am about CSS Grid getting full browser support someday, until then I have Flexbox for company. While Flexbox is more for component layouts, not site layouts, it still has uses aplenty. Developers have found solutions to many long-standing issues that were previously hacked around, and there’s still more out there.

This post lists four common issues I’ve faced in front-end development that Flexbox has mostly or completely solved for me. Flexbox (with prefixes) has almost universal browser support, so there’s little keeping front-end devs from using them. I hope you find them, and the included examples, useful!

(Small warning: this post assumes an understanding of Flexbox’s basics.)

Responsive Logo and Title Pairing

A common annoyance that never went away was pairing a logo and title. Ideally a site wants them both to be center aligned, the logo a constant size with the title taking up the remaining space, and to stay this way on smaller screens. In other words, the logo and title are always vertically-aligned, regardless of screen size.

But any time I aimed for this, especially for smaller screens, it required any number of workaround: absolute positioning, floating, overly-precise breakpoints, or giving up and using a single image instead.

Flexbox makes this pairing easy with some basic features. Just use align-items: center for the container and set the logo to flex: 0 0 auto. The simplicity has another bonus, making it easier to customize for more complex logo-title pairings.

See the Pen Flexbox Example - Center-aligned Logo by Maxwell Antonucci (@max1128) on CodePen.

Note: you’ll likely need to resize your screen for the full effect.

Rows of Articles with Equal Heights

Any site with articles, whether a major news site or a simple blog, has likely had this issue: laying out large groups of articles.

A common article archive page will have three things: a title, excerpt, and image. Making a basic grid for these seems easy, but not in the very likely scenario the elements in each article have different heights. Having a neat layout for these articles suddenly gets more complicated, since it needs to work the same despite all the possible sizes.

Flexbox helps since it actively adjusts not just an individual item’s layout, but the entire row’s layout, based on the content.

Different heights? Flexbox will add in just enough extra space. Items don’t fill up the whole row? Flexbox will move or resize them as needed. Have complicated layouts for smaller screens? Flexbox can work with and without media query styles.

Below is just one example, where every article in each row is the same height, and the images are at the bottom of each. It does so by using flex-direction: column so the items stack vertically, and setting margin-top: auto on the image so it’s pushed down. The articles are also laid out using Flexbox to keep their heights the same and fill up any extra space.

The result: a simple, neat layout that works no matter the size of the titles, excerpts, and images, and for all screen sizes. One flaw is when height differences between articles are too high, things can look awkward. But it’s still a great improvement over most similar, non-Flexbox layouts.

See the Pen Flexbox Example - Article Heights by Maxwell Antonucci (@max1128) on CodePen.

Bonus: Want to center the excerpts in the extra space? In the Sass, remove the margin for .p-article__img, and uncomment the line in .p-article.

Simple Alternating Orders of Content

One way to break of monotony of lists is little changes in the display. For example, with a long list of images paired with text, why not alternate their placements?

However, doing so means changing the HTML for every other article. This is a challenge for both accessibility and generating the content. Ideally, one would want to visually change the order without literally doing so.

Flexbox has a way. For this straightforward example, select every even (or odd) item and use flex-direction: reverse to change the order. They’ll visually switch around without touching the HTML!

See the Pen Flexbox Example - Alternating Displays by Maxwell Antonucci (@max1128) on CodePen.

Flexible Item Highlighting

One common issue I’ve faced before is with highlighted items in a grid. Items you want to draw special attention to, in this case by making them larger, but it risks disrupting the layout. In most cases I’d need to code the grid around a specific location for highlighted items to go. But what about grids where highlighted items, that were sized differently, could be located anywhere?

Some creative Flexbox work shows how. One just needs to change the flex-basis and flex-grow properties for highlighted items, which respectively control the minimum width of the item, and the percentage of extra space it takes up.

Let’s see this in the below example of several social links. Regular links have a flex-basis of 5em and a flex-grow of 1. Highlighted items, meanwhile, have a flex-basis of 8em and a flex-grow of 8. This means highlighted items take up 3 more ems of space in the beginning, and get 8x as much of the leftover space to fill up each row. That, plus a few other style changes, makes them stand out from all the other icons. These classes can be put on any number of links in any place. They’ll adjust as needed, giving a lot more control over their highlighting.

See the Pen Flexbox Example - Icon Collection by Maxwell Antonucci (@max1128) on CodePen.

Here’s a more practical example I forked a while back: an image gallery. This makes it easier to emphasize some photos without disrupting the layout. They use more space while the other photos always adjust and position accordingly.

See the Pen A Better Responsive Image Gallery With Flexbox by Maxwell Antonucci (@max1128) on CodePen.

In Conclusion

Flexbox will continue to be a very useful force in the front-end, even as newer specs like CSS Grid arrive. These examples are just a few of its many uses for solving problems old and new. Expect new ones to keep popping up every now and then. Just today at work, a layout issue with some tabs I’d struggled with for an hour was solved in ten minutes thanks to Flexbox.

So keep these examples, and any in the future, in mind going forward. Flexbox isn’t going anywhere, and for good reason.