[css3-flexbox] Flowing table cells

This email is mostly a simplified recap of thought processes, followed
by a proposal for an addition to Flexbox.

At the recent FtF, I brought up that I thought it would be useful to
explore the idea of flowing table-cell elements into rows, rather than
having to explicitly specify table-row containers.  This wasn't meant
to address any lack in <table>, but rather just to make it easier to
use Table Layout for laying out other types of content.

In mulling over Flexbox, though, I believe this use-case is almost
satisfied purely through Flexbox, and done more flexibly to boot.

Take the example page I showed at the FtF, containing 20-something
questions, three per line.  This appears to be addressed by pure
Flexbox.  All that I have to do is give the container `display:box`
and the questions `width:33.3%` (and possibly a non-default value for
box-sizing).  The default values for the other box-* properties are
sufficient to make it all work properly.

When showing my example, I had brought up some limitations of my
current approach (using inline-blocks).  One, I couldn't easily
control the vertical alignment of the questions, as inline alignment
is basically voodoo.  Flexbox gives me sufficient controls to solve
this with the box-align property.  Two, I couldn't easily make all the
cells on a single row the same height.  Flexbox addresses this through
the `stretch` value on box-align.

There are only two things missing from Flexbox that would be present
in an 'ideal' flowing table-cell spec.  The first I believe can be
safely ignored, and so is not a problem, the second I propose an
addition to Flexbox to address:

1. Having the boxes on different lines (for a multiline flexbox) align
their widths like a table, without specifying a definite width for
them.  Like I said, I don't believe this is likely necessary.
Typically when you'll need columns, equal-width columns will be
sufficient, and these can be achieved by simply setting a % width on
the boxes.  If you *really* need columns to line up, but you can't
specify a definite width, then the "column" effect is probably
semantic, not presentational, and the rows should be put into the code
directly, at which point you can just use Table Layout.

2. Having a multiline flexbox start a new line at an arbitrary child,
rather than just when it runs out of space.  This can be useful to,
for instance, format a <dl> by having each definition group be on its
own line.  I propose a new property (name in the air, as usual):
`box-line-break: normal | break`.  This is specified on children of a
flexbox.  If the flexbox is multiline, the 'break' value means that
the child box immediately begins a new line in the flexbox (column or
row, as appropriate).  If the flexbox is single-line, the 'break'
value is treated the same as 'normal'.  If this property is specified
on an element that is not a child of a flexbox, it must be ignored.

~TJ

Received on Tuesday, 13 April 2010 18:27:57 UTC