Ah, flexbox. Where do I start. OK, so flexbox is a CSS layout option that was added as part of CSS 3. It gives us the ability to layout elements on a page in ways that were only possible using ugly JavaScript hacks previously. This is a good thing.

There are quite a few compatibility issues when viewing flexbox on older browsers (including IE 11). This is to be expected... and it's fine. Developers are used to accounting for this using different methods (graceful degradation / progressive enhancement) and it can generally be worked around... usually accompanied by developers muttering under their breath "Sorry, if you're viewing this page is in IE 11, you have bigger issues in life than not being able to view this element correctly".

However, even though everything other than IE 11 should be able to display flexbox correctly:

1. Sometimes a site is required to work in IE 11 (due to project constraints).
2. I believe you should only flexbox the things flexbox was created for.

So to address point 1, I think most developers have been in (and probably still are in) a situation where you need to support an outdated browser. In these instances, you want to make the site markup and styling as simple as possible. There is beauty in achieving the desired affect in as few lines of understandable code possible. This also has the added affect of minimising the potential areas where something can go wrong. Using flexbox when you need to support a browser that only kind of supports it, is asking for trouble. In these situations, I always try to use the tried and tested methods that we've used prior to flexbox. Want some columns, simply float them... use media queries intelligently to change layouts according to viewports, etc. Nothing special here, just plain old standard CSS. I find that there are very few layouts that I can't achieve by using pre-flexbox techniques.

When I do encounter these situations, then I need to ask the question, "How badly would this section break in older browsers if I do use flexbox". If the team agree that the breakage is acceptable, then I go ahead and use flexbox. If not, then we need to look at another solution (potentially tweak the design or worst case scenario is using JavaScript or a secondary stylesheet). There are always ways to solve problems, but some solutions are more elegant than others.

Now for point 2, I find that even if you are only supporting browsers that fully support flexbox... flexboxing all the things is not a good idea. You want your code to be as predictable as possible. You want code that always behaves the same way across as many situations/variations/permutations as possible.

Flexboxing everything make this goal harder to achieve. By using flexbox on something that can be easily achieved without it, you've just added a potential point of confusion for a future developer. The thing with cascading style sheets is that they cascade... one rule can affect another which in turn, affects another. By using an unnecessary flexbox layout on a parent element, nested child elements may also be affected. This means that if another developer (or your future self) wants to work on those child elements, they may not behave as expected (I've found myself asking 'Where is that height coming from?' quite a few times). When this happens, at some point you'll start tracing your way back up the DOM tree until you find that element that has the flexbox layout... and you'll weep (or is that just me?).

Then you'll be faced with the choice of working within the flexbox layout or changing back to non-flexbox CSS (with all the cross browser testing risks associated with refactoring code).

All this extra time and effort, simply because something that could have been achieved without flexbox, wasn't.

So please my friends, flexbox is an amazing tool that allows us to achieve layouts we couldn't easily before, but please, let's use the tool for its intended purpose. Let's keep things as simple and uncomplicated as possible.