According to Can I use the majority of browsers have fully implemented the flexbox spec. In fact 96.92% of users worldwide use a browser that supports flexbox. The only problem really seems to be IE. Edge only has flexbox partly implemented due to large amount of bugs.
Can I use flexbox or should I wait?
I would definitely recommend to use Flexbox, it's a great tool, saves a lot of time. You can solve complex UI problems with just a few CSS properties ! It's worth the small 4% that won't have the support for it ! Plus, I do really think that Flexbox is gonna be the new standard if it's no already.
Use it. :) As long as you use all the prefixes, you are fine. Edge works fine too. Just don't go to exotic ;)
Depends. What users do you care about? What browsers do they use? If your target audience is 85 y/o house women, it's quite likely they use a very old version of IE which does not support flexbox.
Always research your target audience first, then build the app based on what you learned. Alternatively, use MVP and the Skateboard Principle to find out more about your audience.
Yeah, IE11 is the odd one out, that's why I said to not go too exotic ;) It depends on what browsers your visitors use really. If you have a high percentage of old IE users (corporate environments mostly), don't use it just yet...
Syed Fazle Rahman
Building Bug0, an AI-native E2E testing platform for modern apps - co-founder & ceo @ Hashnode
Yes, it's absolutely safe to use CSS Flexbox, provided you use appropriate fallback. With the Hashnode web app, we are using CSS Flexbox in most of the components. If your audience uses IE11 and above, you should definitely take advantage of CSS Flexbox.
As you have rightly pointed out, most of the browsers have implemented most of the Flexbox functionalities.
Talking about the fallbacks, here are a few which we are using:
For the
displayproperty:display: -webkit-box; display: -ms-flexbox; display: flex;For the
orderproperty:-webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;For the
flex-directionproperty:-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;Similarly, there's a fallback for all the Flexbox keywords. Use this tool (Pleeease Play) for generating, and confirming the fallback rules.
TIP: A Complete Guide to Flexbox should be your CSS Flexbox bible.