- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 13 Apr 2010 11:27:05 -0700
- To: www-style list <www-style@w3.org>
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