v157 · css · alignment

CSS flow-start and flow-end alignment keywords

flex-start has always meant “where the flow begins” — but only flexbox had a flow that could run against the container’s logical direction. Grid Lanes (masonry) brings placement reversal to grid-shaped layout, so the CSSWG resolved to add flow-start and flow-end as value aliases of flex-start/flex-end: one pair of keywords meaning “the edge where content placement begins/ends” in flexbox, grid, and grid-lanes alike. Once shipped, both spellings serialize as flow-start/flow-end.

concepts

  1. Keyword probe

    The exact grammar, probed two ways across six alignment properties: CSS.supports() and whether a setProperty declaration survives the parser. Apply any accepted value to a live flexbox and read the computed result back — with the honest dropped-value story on browsers that predate the keywords.

  2. Reversal playground

    Why the alias is needed at all. Flip a real flexbox through row-reverse, rtl, and column-reverse and watch the measured position of the first item: start follows the container’s logical direction, flex-start follows the flow — they diverge exactly when placement reverses, which is the behaviour flow-start names for every layout.

  3. Serialization contract

    The migration gotcha: after this feature, el.style.justifyContent = "flex-start" reads back "flow-start". A live CSSOM round-trip table shows what your browser serializes today, and a working audit snippet shows which JS equality checks will break.

why it shipped

In Grid Lanes, fill-reverse and track-reverse make placement begin at the opposite edge from the container’s logical start. Alignment then has no keyword for “where placement begins”: start stubbornly means the logical edge. Flexbox solved this decades ago with flex-start, but that name is a lie outside flexbox. flow-start/flow-end give the behaviour a layout-neutral name, and aliasing — rather than adding a parallel value — means flex-start keeps working everywhere with the same expanded meaning. The serialization choice (always report flow-start) is what makes them true aliases rather than two values.

the API

/* identical behaviour, new layout-neutral name */
.lanes {
  display: grid-lanes;          /* masonry — where reversal bites */
  item-flow: track-reverse;
  align-content: flow-start;    /* the edge placement starts from */
}

.flex { justify-content: flow-start; }  /* alias of flex-start */

getComputedStyle(el).justifyContent;    /* "flow-start" — for BOTH spellings */

references