CSS 3: Progress! (Updated) - Infrequently Noted

"nicer form layouts"

As Benjamin H-L hints, this makes me nervous about what this form "looks like" without the CSS -- for example, in a screen reader. Some of us remember how with css-based layouts we could finally have control over source order; this form is a step backward in that department.

Maybe an out-of-order form isn't the best example for using vboxes?

You might be able to ignore IE on mobile, but Opera is pretty strong there, and they don't support flexbox – yet.

Opera's interested in supporting flexbox, but they've been holding off until there's a spec (I'm told WebKit and Mozilla's implementations have many differences). Flexbox has been on the CSSWG radar for years, it's just no one has stepped up to edit the spec. (It's not an easy spec to write.)

The spacer divs in your example are unnecessary (and are going to confuse people into thinking flexbox requires extra elements just to do spacing). You can use box-pack:center. ;)

Good call! Post updated.

Whoa! This is awesome. This is pretty close to what I've been looking for in terms of application layout in html/css. I wish people would spend time talking about this first before we get all excited about custom fonts and css gradients. Stuff like this is way more useful. Thanks for sharing.

I can't wait for CSS3 attr() support in WebKit (https://bugs.webkit.org/show_bug.cgi?id=26609). Then we can simplify this a lot. No need to add all those special class rules for flex

.hbox, .vbox { -webkit-box-flex: attr(flex, number); }

...

The proposed spec for attr does not yet cover keywords. Keywords are needed for box-pack, box-orient, box-align, box-direction and box-lines.

I dont see why people get excited with css animations, CSS is not supposed to be used for that

Mart:

"CSS is not supposed to be used for that" is what has kept CSS from crawling out of the primordial pit for nearly a decade. It's really too bad that our expectations have been lowered so far.

That said, if there's some other part of the web stack that you think should take this one natively (and no, JavaScript doesn't count), then I guess I'm all ears.

Regards

CSS animations and transformations are nice but i think easy and proper positioning without using hacks should be first priority for CSS3 spec. The reason most people still use tables is that it is so intuitive.

@Bilgehan: Tables are only intuitive if that's what you learned first. For those of us that started with CSS layouts, table layouts are mind boggling.

Anyway, this is the first I've heard about flexboxes and I'm excited to see it added to CSS3.

"nicer form layouts"

Hmm. Hopefully, it can it be used to do this without the result being jumbled when publisher CSS isn't applied…

I prefer template layout to flexible box layout, it's more intuitive. I've blogged about it a while ago [1].

Some kind of solution is sorely needed, layout is the major pain point of Ajax right now.

[1] http://2ality.blogspot.com/2009/07/css-layout-soon-good-enough-for-guis.html

Hi,

Thanks for this article. I was just trying this on a chrome extension and wasn't able to nest boxes and flex some of them. The problem was that display:block for box children was overiding display: -webkit-box. I added !important to the latter and now it works.

Hope this helps ;)

Marcos