Sunday, August 23rd, 2009

CSS 3 Flexible Box Model

Category: CSS

>Alex Russell has been having a really interesting discussion with some standards folks about what is wrong on the Web right now, and it narrowed down to discuss CSS variables as a case study (it aint perfect, but get DRY and ship it!)

Alex tells it how it is, but people forget that he does this as he is passionate about the Web, and that he does also give credit and positive outlook IF it is due!

His latest post shows this as he talked about CSS 3 progress and specifically the flexible box model that Mozilla and WebKit have had forevaaaaaah:

David Baron (of Mozilla fame) is editing a long-overdue but totally awesome Flexible Box spec, aka: “hbox and vbox”. Both Gecko and WebKit-derived browsers (read: everything that’s not IE) supports hbox and vbox today, but using it can be a bit tedious. Should you be working on an app that can ignore IE (say, for a mobile phone), this should help make box layouts a bit easier to get started with:

  1. /* hbox and vbox classes */
  2.  
  3. .hbox {
  4.     display: -webkit-box;
  5.     -webkit-box-orient: horizontal;
  6.     -webkit-box-align: stretch;
  7.  
  8.     display: -moz-box;
  9.     -moz-box-orient: horizontal;
  10.     -moz-box-align: stretch;
  11.  
  12.     display: box;
  13.     box-orient: horizontal;
  14.     box-align: stretch;
  15. }
  16.  
  17. .hbox > * {
  18.     -webkit-box-flex: 0;
  19.     -moz-box-flex: 0;
  20.     box-flex: 0;
  21.     display: block;
  22. }
  23.  
  24. .vbox {
  25.     display: -webkit-box;
  26.     -webkit-box-orient: vertical;
  27.     -webkit-box-align: stretch;
  28.  
  29.     display: -moz-box;
  30.     -moz-box-orient: vertical;
  31.     -moz-box-align: stretch;
  32.  
  33.     display: box;
  34.     box-orient: vertical;
  35.     box-align: stretch;
  36. }
  37.  
  38. .vbox > * {
  39.     -webkit-box-flex: 0;
  40.     -moz-box-flex: 0;
  41.     box-flex: 0;
  42.     display: block;
  43. }
  44.  
  45. .spacer {
  46.     -webkit-box-flex: 1;
  47.     -moz-box-flex: 1;
  48.     box-flex: 1;
  49. }
  50.  
  51. .reverse {
  52.     -webkit-box-direction: reverse;
  53.     -moz-box-direction: reverse;
  54.     box-direction: reverse;
  55. }
  56.  
  57. .boxFlex0 {
  58.     -webkit-box-flex: 0;
  59.     -moz-box-flex: 0;
  60.     box-flex: 0;
  61. }
  62.  
  63. .boxFlex1, .boxFlex {
  64.     -webkit-box-flex: 1;
  65.     -moz-box-flex: 1;
  66.     box-flex: 1;
  67. }
  68.  
  69. .boxFlex2 {
  70.     -webkit-box-flex: 2;
  71.     -moz-box-flex: 2;
  72.     box-flex: 2;
  73. }
  74.  
  75. .boxGroup1 {
  76.     -webkit-box-flex-group: 1;
  77.     -moz-box-flex-group: 1;
  78.     box-flex-group: 1;
  79. }
  80.  
  81. .boxGroup2 {
  82.     -webkit-box-flex-group: 2;
  83.     -moz-box-flex-group: 2;
  84.     box-flex-group: 2;
  85. }
  86.  
  87. .start {
  88.     -webkit-box-pack: start;
  89.     -moz-box-pack: start;
  90.     box-pack: start;
  91. }
  92.  
  93. .end {
  94.     -webkit-box-pack: end;
  95.     -moz-box-pack: end;
  96.     box-pack: end;
  97. }
  98.  
  99. .center {
  100.     -webkit-box-pack: center;
  101.     -moz-box-pack: center;
  102.     box-pack: center;
  103. }

With this core baseline CSS you can then do great things such as easily vertically align (duh!)

  1. <div class="hbox center">
  2.     <div class="vbox center">
  3.         <div>...</div>
  4.         <div>...</div>
  5.     </div>
  6. </div>

and smart grouping:

  1. <form action="handler.cgi" method="POST" class="hbox">
  2.     <div class="vbox">
  3.         <label>First Name (required):</label>
  4.         <label>Last Name:</label>
  5.     </div>
  6.     <div class="vbox">
  7.         <input type="text" name="first"/>
  8.         <input type="text" name="last"/>
  9.         <input type="submit"/>
  10.     </div>
  11. </form>

The mighty Erik Arvidsson also reminds us of the CSS3 attr() support (already in Firefox, coming in WebKit too) that would enable us to wire up <div class=vbox flex=2>…</div>.

Although you may be thinking “this is great, but freaking IE means that I don’t care about it.” True. It would be awesome if someone took a shim that could grok this CSS (we built a CSS parser for Thunderhead) and make it work in IE etc. But until that day, or the day that IE implements it (heh) what can you do?

Write iPhone or Palm webOS or Android WebKit apps? You can use it right friggin now!

Related Content:

10 Comments »

Comments feed TrackBack URI

Until someone writes a HTC behavior to mimic the model on IE…

Comment by Jordan1 — August 23, 2009

I actually don’t care that much if IE implements it. As long as it’s not a work related project my new attitude is actually “if it doesn’t work in IE, well, sucks for anyone using IE”.

In any case, this is some very interesting stuff, but to be honest it looks a bit convoluted. Why couldn’t they extend the current system to allow for this.
For example, setting left and right margins to auto centers elements horizontally, why shouldn’t setting top and bottom margins to auto do the same but vertically? Why did they need to go an invent a whole new system for something so basic.
Similarly with flexible elements that stretch to fill remaining space – wouldn’t something like “display:flex-block” make more sense?

Comment by iliad — August 23, 2009

@iliad

I agree. There should be a way to get this layout to be more or less usable in IE. That should be the goal. Not “exactly the same as”, not even “almost as good as”. It should be possible to make stuff that’s just barely usable in IE and brilliant in everything else. This should be the goal.

Comment by okonomiyaki3000 — August 23, 2009

Can also use this for AIR and Titanium projects, I assume, which are both webkit-based.

Comment by Nosredna — August 23, 2009

Jordan1:

I’ve played with a JS implementation for use in Dijit on and off for a while, but like CSS selector engines, it’s not the kind of thing I think we can ship until it’s fast enough so you don’t notice it and aren’t afraid to use it. The root problem is that it’s a 2-pass layout algorithm which is certainly fast enough on Spider Monkey/JSC/V8, but doing the measurements and layout in IE via JScript is…well…painful. It’s maybe the next big challenge for some enterprising JS dev.

Iliad:

Using margins to center only gets you so far, since it’s based on knowing the width (even in relative terms) of the content. The hbox/vbox system frees you from having to know or think about any of that. In that sense, you don’t need to use vboxes with hboxes at all, so you *can* use it as an extension of the current model (although given the advantages of hboxes, i’m not sure why you would).

Regards

Comment by slightlyoff — August 23, 2009

A while back, I worked on a way to implement CSS-level flexible properties using JavaScript. It yielded some rather successful results across the major browsers, including IE6-8:

http://code.google.com/p/jslayout/

Internet Explorer is of course the slowest of the bunch, but I optimized the code to take as few measurements as possible and the speed is definitely tolerable (even with animation such as splitters or resizing a window).

Considering there’s now a spec for flexible properties, it’s possible (in combination with a CSS parser) this could be adapted to implement a Flexible Box Model in IE without much trouble. Of course one’s layout would still have to support a non-JavaScript fallback, but the benefits might be worth it.

Comment by timcameronryan — August 23, 2009

@iliad

I totally agree. I’m fed up with this attitude of: “hey we’ve got a problem – I know lets just throw new properties at it until it works”.

At this rate CSS is on course to join php or rails with a count of 700+ functions.

Refactor? Anyone?

Comment by simon000666 — August 24, 2009

Something taken from XUL

Comment by ssssssssssss — August 24, 2009

CSS3 is becoming the most redundant layout definition language ever. I do like new features, I dislike multiple declaration for the same thing and the same behavior.

Comment by WebReflection — August 25, 2009

Ask and (eventually) you shall receive — IE6-9 support:

http://github.com/doctyper/flexie

Comment by danrubin — October 26, 2010

Leave a comment

You must be logged in to post a comment.