I recently got into an argument with a co-worker where he blamed me for making a component too complex by using flexbox.
His argument was that flex rules like justify-content: space-between might behave unexpectedly when you're manipulating the element it is applied on; while a simple float would always work as it is expected to. This, I think is a pretty valid point.
Can anyone give me some pointers on when and to use flexbox and when not to?
I've been using Flexbox regularly for about a year and I really don't see any advantages to using floats now that I've got the hang of it and now that it's well supported.
I'm surprised they get unexpected results when you have such precise control over flex elements (both on the parent and the children) — even defining widths in pixels if you have to. Could you/your co-worker throw together a quick Codepen to help visualise problem?
NB: A) I might be missing something completely B) I'm a Flexbox fanboy.
As @maruru said it probably depends if you know the specific number of rows and columns. I always use flexbox and try to avoid float, 'cause it requires fixes a lot of times and for me that did not learn using floats, floats behave in a weird way 'cause their parents don't mind the height of the childs which is often a problem specially if you don't know if you're going to need 1 or 50 rows so that's it, at least for me.
Marco Alka
Software Engineer, Technical Consultant & Mentor
I, too, think that your co-worker has a valid point. In a situation where you just want to float a fixed number of
<div>s next to each other, float might be the better choice. Flexbox shines especially when you do not know the number of elements and rows/columns they will take up. So let me make a real-world example: vr-zone. They could use float for their menu bar at the top, but they might want to consider flexbox for the marquee effect of the news articles (in fact, they use JS, but that's not of interest for now :D )