http://github.com/doctyper/flexie

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?

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.

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

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.

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?