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 case) ?

It's not supported at all under IE10 which isn't very good for the near future, and I just can't see any benefits over table layout. But still, the internet is starting to get full of "worshipers" of this new CSS method of layout, and all the examples I see can be easily done with normal css without problems.

---

Update 25.12.15:

I have been using flexboxes a lot since they were introduced to modern browsers and had stopped using display:table and so on, because flexboxes are more powerful and easy to use.

Answer 1

Flexboxes are more flexible and semantically appropriate since tables were never meant to be used for layout. From MDN introduction to Flexbox:

Why Flexbox?

For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.

The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:

• Vertically centering a block of content inside its parent.
• Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
• Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.

As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!

Answer 2

The Flexbox model is more powerful than display table. Flexbox supports layouts for right to left languages for example. And yes indeed, flexbox is a bit complex and that's an entry barrier. Float and clearfix layouts are a (clever) hack, somehow in the same way table layouts are a hack, flexbox is meant for layout.

The browser support is getting better lately, some say we should use it now. Bootstrap 3 does however not make use of flexbox, but i can imagine that the next version will.

Answer 3

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)

Answer 4

Simply put, it's something that'll be beneficial in a few years. Like many advanced css techniques, HTML5, etc., a few people will adopt them with painful fallbacks and shims/shivs for the next couple of years.

When browsers support it in the future, we'll have a party and all hate on the 'old' browsers that don't support them :).