I've been meaning to write this post for a month. I'm bad at time management.

If you've been following my blog over the last year or so, you'll know that I'm the active editor of the CSS Flexbox spec. I picked up this spec because I thought the original spec was too close of a direct translation from XUL, and that we could do better. Specifically, I thought we could rewrite the spec to use normal box-model properties (width, height, padding, margin) and just directly make them flexible. If you look back through my archives you'll see several attempts at rewrites in this vein.

Well, the experiment has ended. The spec has returned to a form very similar to the original. I'm a little sad about this, but it's the right choice. Unfortunately, if you limit yourself to making the box-model properties flexible, several useful things are simply impossible, and several others are overly difficult.

Specifically, flex-pack: distribute can't be done without screwing around with margins on :first/last-child, like you have to do to today when using floats for similar purposes. flex-align: baseline is completely impossible. All of the flex-pack properties are impossible if the flexbox is multi-line. And don't even get me started on controlling the distribution/alignment of lines in a multi-line flexbox. The lines aren't real boxes, so you can't access them to tweak their margins, etc. unless we add extra pseudo-elements. Once you need one special property to control the alignment, it starts making more sense to handle all of the alignment in that property.

There have still been some wins. I've merged the old box-direction and box-orientation properties into a single flex-flow property. (The syntax for flex-flow looks a little scary, but it's pretty simple in practice.) I've axed the box-flex-group property, while box-ordinal-group has been renamed to the much friendlier flex-order. And most importantly, width and height are still directly flexible, rather than deferring to a separate box-flex property. Multiple authors (including the CSSWG's own chairman!) have been confused by the way box-flex works over the years. I'm very happy that stayed dead.

An additional silver lining is that Flexbox and Grid Layout now share many concepts, so learning one of them will help you understand the other. I'm extremely happy about this; the new layout models need to be as simple and easy as possible to help justify their additions, and now that these two are compatible, any future layout models have a very good reason to also be compatible. Yay! I'm going to continue to work on getting them to share concepts, and ensure that the general layout algorithm is consistent between the two so things are predictable.

The spec is pretty stable now, and I'm happy about that. I've got a few outstanding issues we're currently discussing in the group about the meaning of a few properties (in particular, if we can simplify flex-flow, and exactly how the center values work in the three alignment properties). Once we resolve those, it's simply a matter of me turning my sketch of a layout algorithm into something detailed and normative, like what I had before. Then I can release a WD, hopefully get that to CR, write tests, and continue on from there. Yay!

If you have comments on the draft, feel free to either email me personally or email www-style@w3.org with the subject starting with "[css3-flexbox]".