v157 · css · alignment · why reversal needs it

Reversal playground

Two keywords claim to mean “the start”: start follows the container’s logical direction, flex-start follows the flow — the direction placement actually runs. In an ordinary row they agree. Reverse the flow and they split. The playground measures the split live; flow-start is the layout-neutral name Chrome 157 gives the flow-relative half, because Grid Lanes’ fill-reverse/track-reverse create the same split outside flexbox.

Probing this browser…

The experiment

flex-direction:
dir:
justify-content:
1
2
3
Measuring…

Divergence table — measured in this browser

One click fills the whole table: item 1’s physical offset for start vs flex-start across every flow. The rows where they differ are the rows flow-start exists for.

Not measured yet.

and beyond flexbox

/* Grid Lanes (masonry) — the case that forced the rename */
.lanes {
  display: grid-lanes;
  item-flow: track-reverse;     /* placement starts at the far edge  */
  align-content: start;         /* logical edge — NOT where placement starts */
  align-content: flow-start;    /* the edge placement actually begins */
}

No current engine ships Grid Lanes reversal, so this page demonstrates the identical semantic split with flexbox — which is real, shipped, and measurable today. The aliasing contract means everything the playground shows for flex-start is, by definition, the behaviour of flow-start.

see also