Infrequently Noted

Alex Russell on browsers, standards, and the process of progress.

Comments for CSS 3: Progress! (Updated)

"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?

by David Reese at
You might be able to ignore IE on mobile, but Opera is pretty strong there, and they don't support flexbox – yet.
by Ms2ger at
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.)
by fantasai at
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.
by alex at
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 ( 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.

<div class=vbox flex=2>...</div>
I dont see why people get excited with css animations, CSS is not supposed to be used for that
by Mart at

"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.


by alex at
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.
by Bilgehan at
@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.

by Billy at
"nicer form layouts"

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

by Benjamin Hawkes-Lewi at
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.



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 ;)