I use flexbox exclusively. My personal opinion is that if you're using media queries for anything other than "screen" vs "print" you're absolutely doing it wrong, in particular, media queries for screen size are a red flag.
To me, the trick to using flexbox effectively is to use it to create fully reactive layouts the way that Gtk or Qt would design them. I create flexbox interfaces in terms of "VBox" and "HBox" containers, I use flex-grow to handle the concept of "box packing."
Once I started seeing it through this lens, and when CSS finally added calc() and other functions writing good and consistent frontend UIs that mimic precisely how almost all other desktop software behaves became incredibly simple.
The only real complaint I have is that after I have a finished product, going back and making changes is harder than what other techniques might afford, thankfully HTML added <template> and by incorporating that liberally into my designs I've regained some of the original careless flexibility I had before it.
Thank you for your answer. I'm more curious about your approach. Would appreciate if you have some pointers in that direction. Like some sample/gist or blog posts etc.
Hope this helps. I used to do a lot of work in GTK's Glade and Qt's Designer. I was surprised how simple flexbox made it to just recreate those ideas in CSS.
There are nice technical solutions. Media queries + flex + grid (when you need it) give you all the tools you need. There's just a lot of ways to do it wrong.
Has flex+grid eased the situation somewhat? With media + container queries?
If not, why not? Are these models too complex or the browsers still are buggy/inconsistent in their implementation of these layout algorithms?