Flexbox is awesome but don’t use it here

Ohans Emmanuel
Nov 15, 2016 · 6 min read

Flexbox is arguably the best thing that happened to most of us (if you write css) but does that make it perfect for all use cases?

Image for post
Image for post

Quickly, I’d highlight certain use cases where when possible, you may want to reconsider the use of the Flexbox model.

By the way, I’m a big fan of the Flexbox model. I even what’s arguably the most comprehensive article on it.

Still, it is worth knowing what should be done with the Flexbox model, what shouldn’t and just where it shines best.

Here are my top 3 use cases where you may want to avoid using the Flexbox model, and I do give reasons why.

1. Using Flexbox as a true Grid System

Image for post
Image for post

Years and years have passed and many (including myself) bend the css box model to do their bidding.

From crazy check-box click hacks to “pure-css drawings”, it’s fascinating what we can do when we bend the rules — something web developers seem to be rather proficient at.

I have got nothing against doing these, but when this is done, we are bending the rules, aren’t we?

We make things do what they weren’t actually designed for — largely because we can, or we’re in some sort of situation that demands we do. Sometimes this is done solely for the fun of it (I guess I fall into this category).

Likewise, when you choose to use the Flexbox model as the sole Grid system in your layout, you’re bending the rules again.

So, can’t I just use it anyway?

Well, maybe you can, but It’s the same as bending the css box model to do your bidding.

It wasn’t designed to be used as a full grid system. Even though you may equally bend the Flexbox model to do your bidding, and I have on many occasions, it still doesn’t change that.

That’s what the Grid layout is made for — Ha, that’s soon to be the talk of 2017 as it gets shipped in all major browsers.

Can I get away with using the Flexbox model as the sole grid system in my layout?

Aye! We all get away with these things.

Don’t we?

If you’re trying to put together a not so complex layout, or basically revamping your layout for mobile yes this is possible.

You can get away with this, and I’ve even laid out some complex layouts with just Flexbox — just because I can, and to push the boundaries of what’s possible.

Are there any caveats to doing this?

Yes there’s one major one that comes haunting you.

If you have to cater for older versions of IE (do they even support anything good?) then this is a terrible idea as users will be completely left in the dark — there’d be nothing to display.

However, if you use the Flexbox model as some sort of progressive enhancement on these browsers, maybe providing a fallback layout technique using the quite annoying table display, then you’d have made your old IE users grateful.

Many of the criteria for a true Grid system comes for free with Flexbox — which I think is great.

It does lack one vital criteria though. A criteria which is like the holy grail of layouts and thus still inhibits it’s use as a complete grid system.

This is discussed below.

2. Having Complete control over Visual Placement

With great powers come great responsibility … and misuse! ( I added that).

One of the many sweet spots of the Grid layout system is the complete freedom of visual placement of content without a lot of regard for the html source order.

But doesn’t the Flexbox model have an order property?

Yes it does.

Doesn’t a cat have four legs, while you’ve got just two?

Image for post
Image for post

The cat looks great, but I bet it still doesn’t look human on that suit! You are human, no doubts.

It’s the same with Flexbox implementation of “order” via the order property.

It works great for simple re-orderings like this:

Image for post
Image for post
before re-ordering with flexbox
Image for post
Image for post
after re-ordering with flexbox

However, it is still somewhat based off of the html source order of the elements.

So, it falls back to the “cat-person” analogy.

Dealing with source order is a completely different thing with the CSS Grid layout. The Grid layout is a topic for another day, so I’d not go into details here.

3. Flowing content into multiple columns, and more

I don’t think many people try to use the Flexbox model for these, but it is worth mentioning that CSS3 comes with a lot of layout enhancements other than Flexbox — Flexbox just happens to steal the show.

If you’re trying to accomplish any of these, then consider using the appropriate layout mechanism already provided by CSS3.

i. Using exclusions and shapes

Image for post
Image for post

If you’re building a sophisticated layout and want to define arbitrary areas to flow content and(or) geometric shapes as content wrappers, then use the right tool for the Job. You can wrap this in a flex-item but handle the exclusion and content-wrapper with the right tool

ii. Implementing multi-columns

Image for post
Image for post

Multi-columns are at the heart of traditional desktop publishing software like Indesign, where texts from a column automatically flow into another when resized or cannot contain all the content.

There’s a css3 layout mechanism for this if you do have to deal with this in a project of yours.

So, If you’re also trying to do this, again, use the right tool for the job.

Maybe you can make such column a flex-item too? I haven’t played around with that — not sure.

In conclusion, Flexbox is still the Hero it is! My Hero.

It is great to know your tools well, where and when they shine best too.

For Flexbox, it’s biggest strengths lie in laying out individual sections within an overall page layout.

Did you enjoy this?

Call to Action

I can help you master Flexbox and CSS Grids from the ground up. let me know where to reach you, and I’ll be glad to help. For your hassles, I’ll send you my Flexbox Cheatsheet guide as a free gift. Sign up here.

Image for post
Image for post
My free gift on signing up

Ohans Emmanuel

Written by

I build complex frontends. I’m passionate about teaching intricate subjects e.g.https://leanpub.com/reintroducing-react. Now writing here: www.ohansemmanuel.com

Ohans Emmanuel

Written by

I build complex frontends. I’m passionate about teaching intricate subjects e.g.https://leanpub.com/reintroducing-react. Now writing here: www.ohansemmanuel.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store