31

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.

vsync
  • 118,978
  • 58
  • 307
  • 400
  • 2
    I've never heard of the model before but at a quick glance, this looks cool - it finally seems to provide a semantically clean way to do all the layout stuff that used to be possible only with tables (aligning elements in a grid top/center/bottom, having a group of elements stretch dynamically) but without ``s or the insane `display: table` workaround.
     – Pekka Aug 24 '13 at 13:36
  • `dispay:table` is not insane at all in my opinion and is very elegant. it describes an element as a table and then you can control it's children however you wish, and the semantic part is always up to you, flexbox is not HTML, it's just css. – vsync Aug 24 '13 at 13:52
  • 1
    `display: table` is still connected to the concept of tables, which arguably isn't semantically correct when you build a layout. Flexbox seems to finally be breaking with that, and adding further ways to control layout. I've been waiting for something like this (but obviously it isn't mass market ready yet when used alone... and it won't make sense to use it in combination with `display: table`, as that is supported by all browsers) – Pekka Aug 24 '13 at 13:54

4 Answers4

26

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)

Transparent
  • 303
  • 2
  • 6
  • 4
    http://learnlayout.com/flexbox.html Firefox is actually pretty fine now. Even without prefix. – vsync Aug 24 '13 at 15:02
  • For you point: *It has been said quite a bit, though, that it is the future for layouts*. What about GRID layout? – overexchange May 18 '18 at 15:28
5

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.

Frank Lämmer
  • 2,165
  • 19
  • 26
  • 2
    it's a "hack" if you see it that way, I don't see `display:table` as a hack at all, but as a way to organize information on the page. and floats can be as complex as anything else, depends on the implementation. And personally, I don't this Bootstrap was made by a very talented people, just because Keanu Reeves is famous doesn't make him a good actor. Think about that.. – vsync Oct 20 '13 at 15:12
  • 1
    sorry, with table layouts i was referring to this old school layout technique using real ``s.
     – Frank Lämmer Oct 20 '13 at 15:55
  • ho well tables ARE for tables, not for layout :) – vsync Oct 20 '13 at 19:56
3

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 :).

StackExchange What The Heck
  • 2,656
  • 7
  • 39
  • 51
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!

qwr
  • 9,525
  • 5
  • 58
  • 102