flexbox vs tables, why do we need flexbox?

Question

Can anyone please enlighten me on how the new Flexbox layout model is any better than current tables way? (display:table and all those are includedin my

Answer 1

There are three distinctions I can think of between using flexbox and using table display values or floats to layout a page:

1. Being able to re-order elements irrespective of the HTML source order, while keeping elements in the normal flow - you can do this by specifying an integer value with the order property.
2. It requires less typing than traditional float layouts (you don't need all of the pseudo-elements for clearing purposes) and is more semantic, while using floats or tables for layouts obviously isn't.
3. The ability for flex-items to grow and shrink to fill horizontal and vertical space based on an ancestor elements' dimensions - by using the flex-grow and flex-shrink properties.

The problem (as you've pointed out) is that support is still pretty bad; In fact Firefox is still implementing an older version of the flexbox module, so you have to account for minor discrepancies in syntax and behavior, depending on which browser you're using. It has been said quite a bit, though, that it is the future for layouts, especially for complex web apps that are popping up more often. It's worth learning if you're okay with making an inevitably wise investment - at the cost of not really being useable right now.

I also suggest you take a look at this smashing magazine article for a friendly introduction to flexbox (it's fairly recently written)