CODEWITHSUNDEEP
css
Efeyabel
Efeyabel

Reputation: 508

Why should I prefer float over flexbox?

I am new in front end design and when I was looking information about this I found 2 techniques about positioning: float and flexbox.

My question is: What should I use more? I'm oriented in mobile design too.

Upvotes: 1

Views: 287

Answers (1)

Derlin
Derlin

Reputation: 9881

As this great article sums up:

Floats

Advantages

  • Most popular way to lay things out; most grid frameworks follow this.
  • Everyone's aware of float bugs due to the popularity of floating, and there are well documented ways to overcome them.

Disadvantages

  • Need to be cleared. Can be quite painful if you're changing widths at 2-3 media query breakpoints, because the floats will need to be cleared that many times.
  • No vertical centering
  • No equal heights
  • No source order independence

Use for:

  • Large layout blocks that don't need equal heights and vertical centering

Flexbox

Advantages

  • Source order independence. Could be of tremendous value for responsive layouts and eliminates the need for JS for this.
  • Vertical centering
  • Equal heights
  • Flex boxes move along interchangebly the X and Y axis, with such ease, that you can really change things around with a couple of properties.
  • Boxes grow and shrink, can be columns or rows, fit to the available space however you wish to declare this.
  • There are multiple ways to do the same thing with flexbox.

Disadvantages

  • Syntax is initially unintuitive. You spend the first few hours looking at demos saying WOW, followed by WTF.
  • I've been noticing weird cross browser inconsistencies [...]
  • A deep understanding of Flexbox takes a while. Once the layout gets more complex, or you add a couple of divs, things can get confusing. I'm going to document this more in an article.
  • Lots of vendor prefixes, with a different syntax for older IE and Webkit. Use something like Autoprefixr to work around this. Or write some mixins. Or do something..
  • Doesn't work on IE9. If you don't have to support IE9, you're fine.
  • Reports of the older syntax impacting performance. I wouldn't care too much about this honestly, especially if you were using JS to do the things Flexbox now can...

Use for

  • You can already start using it for vertical centering, if you don't need things to look the same on IE9.
  • If you don't need IE9 support, it's perfect for source order independent layouts, equal heights.
  • I would highly recommend using it for personal projects.
  • App layouts where things need to stretch and squish. Flexbox really shines here.

So to recap', flexbox is the modern way, very powerfull but harder to learn. As it is kind of new, there is also a lot of bugs and it is not seemlessly compatible. floats are the old way: it is more basic, but easy to use.

Upvotes: 2

Related Questions