Re: [css3-flexbox] getting multiline flexbox back into the spec

Here's a slightly different suggestion inspired by something Shane
worked out.  This one avoids any possible confusion with invalid
combinations, and I think is easier to read:

flex-direction: <orientation> [<horizontal-dir> <vertical-dir>?]?
<orientation> = _rows_ | columns | horizontal | vertical
<horizontal-dir> = ltr | rtl | _forward_ | reverse
<vertical-dir> = ttb | btt | _forward_ | reverse

The first keyword, which is required, gives the general orientation -
the first two are writing-mode dependent, the latter two are physical.
 It specifies the axis on which the flexbox items will be laid out;
lines will be stacked in the opposite axis.

The second and third keywords, which are optional, specify,
specifically, the direction in the (physical) horizontal axis and the
vertical axis.  By doing it this way, you avoid any of the "mixing
physical and logical" confusion - it's perfectly well-defined and easy
to mix them, since you're specifically saying "use the logical
direction in the horizontal axis" or whatever.

As indicated by the underscores, the default value is "flex-direction:
rows" or "flex-direction: rows forward forward" (difference is
irrelevant).

This does *not* indicate whether the flexbox should wrap or not.  I'm
fine with that staying a separate flex-wrap property, as was previous
discussed ("flex-wrap: _nowrap_ | wrap", with the option of "balance"
later?).

In the common cases, this seems to be pretty easy to deal with:

* A horizontal toolbar, direction-dependent: "flex-direction: horizontal"
* A horizontal toolbar, specific direction: "flex-direction: horizontal ltr"
* A vertical toolbar, direction-dependent: "flex-direction: vertical"
(will basically always be ttb, I think?)
* A vertical toolbar, specific direction: "flex-direction: vertical ltr ttb"
* A flexbox that should accompany text and follow it "down" the page:
"flex-direction: columns"
* Two vertical toolbars, one on each side of the page, stacking lines
toward the center:
  #left { flex-direction: vertical ltr ttb; } #right { flex-direction:
vertical rtl ttb; }

The only thing that's slightly clumsy is that if you want to specify
the direction of a vertical flexbox that doesn't wrap, you still have
to specify the horizontal direction that the non-existent multiple
lines would stack.  I think that's a pretty minor problem, but if it's
annoying, I can complicate the grammar a little bit and allow
"vertical" to be accompanied by "ttb" or "btt".

~TJ

Received on Monday, 25 July 2011 18:47:46 UTC