Intent to Prototype: CSS flow-start and flow-end alignment keywords

127 views
Skip to first unread message

Celeste Pan

unread,
Sep 4, 2026, 6:25:01 PMSep 4
to blin...@chromium.org, Alison Maher, Hoch Hochkeppel (HE/HIM)
Contact emails:

Explainer
N/A

Specification
Changes have not been made to the spec yet, but resolutions around this can be found here: https://github.com/w3c/csswg-drafts/issues/14052

Summary
It was resolved in the CSSWG that we should introduce the flow-start/end keywords as value aliases for the existing flex-start/end keywords. These are needed for alignment in the case of placement reversals.

flow-start in CSS Grid-Lanes would indicate the starting edge of the container at which placement begins, which is useful in the case where placement is reversed (`fill-reverse`, `track-reverse`, discussed in this CSSWG issue: [css-grid-3][masonry] item-flow row vs. column in masonry layouts · Issue #12803 · w3c/csswg-drafts).  Because these are acting as value aliases, we expect flex-start/end to follow the logical directions in Grid Lanes, as well, which will expand the definition of these keywords from only applying special behavior in flexbox to applying to any layout mode whose logical start/end is different from its physical start/end.

For serialization, if either flex-start/end  or flow-start/end  is used, the returned serialized value should be flow-start/end.  This could introduce compatibility concerns for sites that rely on the existing serialization of flex-start/end.  Because of this, we plan to use a second flag to introduce a separate gate for the new serialization behavior of flex-start/end so that if we receive reports of site breakages as a result, we can disable the serialization behavior separately from the new keywords.

Blink component

Web Feature ID

Motivation
The start/end alignment keywords follow the physical start/end directions of a given container. In layout modes that support reversals, these keywords may align content in the opposite direction than authors are looking for. The flex-start/end keywords currently allow authors to choose the logical start/end of a flex container, but with new layout modes like grid lanes supporting reversals, as well, the need for a new more generic way of choosing the logical start/end that wasn't flexbox specific was introduced. These new keywords provide that solution, and are generic enough to apply to any new layout modes or logical impacting adjustments in the future.

Initial public proposal

Requires code in //chrome?
False

Tracking bug

Link to entry on the Chrome Platform Status


Reply all
Reply to author
Forward
0 new messages