I’ve been in a pretty heated email conversation over the past couple of days regarding how effective (or not) the CSS Working Group has been. I’ve been pretty brutal in my critique in the past (and much of it still stands), but there’s reason to hope.
The best bits are — not surprisingly — being driven by the implementers. Apple is in the driver’s seat, with major contributions for Animations (including keyframes!), 2D Transforms, 3D Tranforms, and Transitions. Great stuff.
Similarly, 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:
/* hbox and vbox classes */ .hbox { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: stretch; display: -moz-box; -moz-box-orient: horizontal; -moz-box-align: stretch; display: box; box-orient: horizontal; box-align: stretch; } .hbox > * { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; display: block; } .vbox { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; display: -moz-box; -moz-box-orient: vertical; -moz-box-align: stretch; display: box; box-orient: vertical; box-align: stretch; } .vbox > * { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; display: block; } .spacer { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } .reverse { -webkit-box-direction: reverse; -moz-box-direction: reverse; box-direction: reverse; } .boxFlex0 { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; } .boxFlex1, .boxFlex { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } .boxFlex2 { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; } .boxGroup1 { -webkit-box-flex-group: 1; -moz-box-flex-group: 1; box-flex-group: 1; } .boxGroup2 { -webkit-box-flex-group: 2; -moz-box-flex-group: 2; box-flex-group: 2; } .start { -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; } .end { -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; } .center { -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; } |
I’ve been using these rules for some time to good effect. You can use them to easily visually center things (for example):
1 2 3 4 5 6 | <div class="hbox center"> <div class="vbox center"> <div>...</div> <div>...</div> </div> </div> |
Or you can use grouping to get nicer form layouts:
1 2 3 4 5 6 7 8 9 10 11 | <form action="handler.cgi" method="POST" class="hbox"> <div class="vbox"> <label>First Name (required):</label> <label>Last Name:</label> </div> <div class="vbox"> <input type="text" name="first"/> <input type="text" name="last"/> <input type="submit"/> </div> </form> |
It’s unfortunate that this stuff is “medium priority”, but at least it’s moving forward in the WG.
Update: Fixed the examples and rules to use box-pack: center;, per Dave Hyatt’s excellent suggestion!
15 Comments
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.
<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
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…
“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?
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
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
7 Trackbacks
[...] 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 [...]
[...] Více viz CSS 3: Progress! od Alexa Russella. [...]
[...] swiftly to become a recommendation.I owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to me.Read more articles like this on my blog, Broken [...]
[...] owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to [...]
[...] owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to [...]
[...] owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to [...]
[...] altro articolo interessante a riguardo è sul blog di Alex Russel, che ha preparato un foglio di stile su misura per avere già pronte tutte le classi [...]