Flexbox is awesome but don’t use it here
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?
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
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?
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:
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
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
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.
