Re: [css3-flexbox] New WD "CSS Flexible Box Layout"

On Thu, Jul 23, 2009 at 5:31 PM, Bert Bos<bert@w3.org> wrote:
> The CSS WG published the first of a new series of working drafts, called
> "CSS Flexible Box Layout Module Level 3":
>
>    http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
>
> It proposes the new values 'box' and 'inline-box' for the 'display'
> property. Both of these cause an element to lay out its children in a
> single row or column. Other properties then determine the order of the
> children (bottom to top, left to right, etc.) and how space is
> distributed in and between the children.
>
> The module basically translates the XML-based syntax from XUL (Mozilla's
> UIDL) into CSS and is thus specifically meant to lay out parts of GUIs.
>
> The module should be compared with the Grid Positioning[1] and Template
> Layout[2] modules. Although those are primarily for typography rather
> than GUI layout, they overlap with Flexible Box Layout. Possibly a
> single, generalized model can be made, combining the unique features of
> each: source order independence, positioned floats, flexible
> inter-element spaces, grid-dependent length units, etc.
>
> [1] http://www.w3.org/TR/2007/WD-css3-grid-20070905
> [2] http://www.w3.org/TR/2009/WD-css3-layout-20090402
>
> Comments on the module are welcome. Please, send them to this mailing
> list, <www-style@w3.org>, with a subject line that starts with
> [css3-flexbox], like the subject line of this message.

I've been reviewing various designs I've done in the past, and seeing
how applicable flexbox would be to them, and been pleasantly
surprised.  box-pack:justify, especially, would be extremely useful.
I think this will replace a majority of the current float-for-layout
hacks that are necessary in modern designs, and do it much better than
floats ever could.  (Template Layout replaces most of the others.)

The one thing that I noticed I've done with floats but can't reproduce
with flexboxes is having two sets of boxes, one packed to the left and
the other packed to the right.  I believe that XUL devs usually use a
<spacer> with a higher box-ordinal to achieve this effect, right?

This could probably be reproduced by combining flexbox and template
layout, creating two template slots and flowing the elements into one
or the other before aligning them.  This would require the ability to
set display on ::slot() pseudoelements (to make them display:box),
though, which has been requested before.

~TJ

Received on Sunday, 26 July 2009 14:28:45 UTC