[css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow

[fantasai]

The TAG response to the masonry syntax issue asked us to look into unifying controls for our layout modes, calling out grid-auto-flow and flex-flow (flex-direction + flex-wrap) in particular. Apple looked into this, and we have the following syntax proposal:

Introduce item-flow aliased to both flex-flow and grid-auto-flow and defined as a shorthand for the following properties:

• item-direction (also aliased as flex-direction)

  • row | column | row-reverse | column-reverse

• item-wrap (also aliased as flex-wrap)

  • auto | wrap | wrap-reverse | nowrap
  • auto computes to either wrap (for Grid) or nowrap (for Flexbox)
  • nowrap in Grid would mean autoplacement adds implicit tracks instead of wrapping to the next row

• item-pack

  • normal | dense
  • Defining dense packing for Flexbox would mean that instead of breaking lines as soon as an item can’t fit, we try to cram in one more, triggering flex-shrink behavior instead of flex-grow on that line. See [css-flexbox-2] Add flex-wrap: dense #3071.
  • This syntax allows the potential to expand packing controls, e.g. item-pack: normal | dense || [ collapse | balance ] could allow:
    • collapse triggering a masonry-style layout for Grid (see [css-grid-3][masonry] Masonry Syntax Debate #11243).
    • balance opting into balanced line-wrapping for Flexbox ([css-flexbox-2] Add flex-wrap: balance; #3070).

• item-slack

  • <length-percentage>
  • This is the masonry-slack property. See [css-grid] Decide on a name for masonry-slack #10884.
  • For Flexbox, slack could say at what point you switch from loose packing to cramming:
    • In normal mode, 10px slack would mean “if there’s only 10px overflow on this line when adding the next item, cram it in anyway, as squeezing in an extra 10px is no big deal”.
    • In dense mode, 10px slack would mean “if there’s only 10px empty space left on this line, don’t try to cram in the next item, that’s too much cramming”.

Caveats: This would make flex-flow and grid-auto-flow cascade as a single property, which is a change in behavior and therefore could have some Web-compat impact.

Variations: This is our initial sketch, but there are some variations we’ve considered:

• We’re unsure if item-slack should be a longhand of item-flow or not: it's often nice to put it in the item-flow shorthand, but it might also make sense for it to cascade independently.
• We’re open to ideas about the item- prefix. Ideas we’ve come up with so far include item-, box-, items-, and placement-. (We’re drawing the “item” terminology from the specs and from the align-items property.)

Thoughts?