6 ms·
Flexbox has its place in one's toolkit, but I still prefer floats in many situations. It might be subjective, but floats often seem to result in cleaner CSS, ev
by kijin 6y ago
Flexbox has its place in one's toolkit, but I still prefer floats in many situations. It might be subjective, but floats often seem to result in cleaner CSS, even taking into account the clearfix hack (which becomes much simpler with a Sass mixin).
Suppose you have the following desktop layout:
ONE TWO THREE FOUR FIVE
and you want to turn it into the following mobile layout:
O N E
TWO THREE
FOUR FIVE
With floats, you can achieve that by overriding only a few properties, primarily 'width'. But if you asked me to do it with either flexbox or grid, I'd have to think for a bit.
Flexbox is good for things that need internal flexibility in one dimension. Grid is for things that have a relatively static, two-dimensional layout. Floats are perfect for things that need to shuffle across dimensions, and I don't see any reason to avoid using them. After all, it's not as if floats are un-semantic or anything.
- kaishiro 6y agoIn your example, how are floats any different than a flex container with wrapping enabled? The wrapping is still dependent on the width of the children, just like your floating elements.
- kijin 6y agoIt's not different. Both will work. But if the above is all you need, I feel that flexbox adds a lot of verbosity for no benefit.
- Izkata 6y agoTwo ways offhand: * Float will alight "one" to the left or right with a gap next to it, while flex can stretch, center, or align the element differently. * If the elements are different heights, they'll stack up very differently.
- rimliu 6y agoI think it is a common misconception that grid based layouts are static. Some combination of repeat, auto-* and minmax() can give very flexible layouts without even needing CSS media queries.