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

[Celeste Pan]

Contact emails

celes...@microsoft.com, alm...@microsoft.com, yanli...@microsoft.com, mho...@microsoft.com

Explainer

No information provided

Specification

https://github.com/w3c/csswg-drafts/pull/14539

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.

Blink component

Blink>CSS

Web Feature ID

https://github.com/web-platform-dx/web-features/issues/4282

Motivation

In grid-lanes, there is currently no alignment keyword to allow us to align based on the start of content placement when reversal is present; instead, we can only currently use the logical container start/end.  We wanted a keyword that behaves the way flex-start/end does in flexbox containers.  Introducing flow-start/end allows us to align based on content placement start/end, and aliasing it to flex-start/end means that we can have the same keyword used across flexbox, grid, and grid-lanes layout with the same expected behavior.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/12803

TAG review

N/A - the feature is an alias to an existing API and documentation of its resolution can be found in this CSSWG issue: https://github.com/w3c/csswg-drafts/issues/12803

TAG review status

N/A

Goals for experimentation

None

Risks

• Interoperability and Compatibility

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.

Gecko: Positive (https://github.com/mozilla/standards-positions/issues/1455#issuecomment-5839398061)

WebKit: No Signal (https://github.com/WebKit/standards-positions/issues/723)

Web developers: No Signal (While we don't have direct signals from developers on flow-start/end, flex-start/end are used by a number of sites to achieve alignment based on placement direction, thus, because grid lanes also supports reversals, a more generic keyword allows us to extend the behavior to other layout modes to achieve the same use cases that developers are able to achieve in flexbox today)

Other signals:

• WebView application risks: N/A
  
  

Debuggability

They will have same debugging capabilities as flex-start/end.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/css/css-align?label=master&label=experimental&aligned&q=css-align

Flag name on about://flags

No information provided

Finch feature name

CSSFlowStartAndEnd,CSSFlowStartAndEndSerialization

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/555299635

Estimated milestones

   Dev Trial                                     157

   Shipping                                     158

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5069051687731200?gate=5575518593351680

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/DM4PR00MB24735CF983FF2BE273586298D3B52%40DM4PR00MB2473.namprd00.prod.outlook.com

[Philip Jägenstedt]

https://wpt.fyi/results/css/css-align is a larger test suite, are all of the relevant tests already passing? (I tried to dig in but https://github.com/web-platform-tests/wpt.fyi/issues/5203 got in the way of filtering.)

And thanks for filing https://github.com/web-platform-dx/web-features/issues/4282!

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/BL4PR00MB24712DB30828C8E0EA0FCD1BD39D2%40BL4PR00MB2471.namprd00.prod.outlook.com.

[Celeste Pan]

Thank you for the review! And yes, the relevant tests in https://wpt.fyi/results/css/css-align are all passing (the tests which formerly used `flex-start/end`).

Best,

Celeste

---

From: Philip Jägenstedt <foo...@chromium.org>
Sent: Thursday, October 15, 2026 2:10 AM
To: Celeste Pan <celes...@microsoft.com>
Cc: blin...@chromium.org <blin...@chromium.org>; Alison Maher <alm...@microsoft.com>; Hoch Hochkeppel (HE/HIM) <mho...@microsoft.com>; Yanling Wang <yanli...@microsoft.com>
Subject: Re: [blink-dev] Intent to Ship: CSS flow-start and flow-end alignment keywords

 

You don't often get email from foo...@chromium.org. Learn why this is important

[Alex Russell]

LGTM1

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Dan Clark]

Can you please request the other reviews (or request N/A) in Chromestatus (Enterprise, Testing, Adoption)?

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Chris Harrelson]

I'd like to wait for the spec PR to land; it's currently under review.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/e1739cb7-3c2f-4698-b0bf-ea88afac1aafn%40chromium.org.

[Celeste Pan]

Hi Chris,

Thank you for the review!  The spec PR actually just landed: [css-align-3][css-grid-3] Define flow-start/end alignment aliases (#14052) by celestepan · Pull Req…!

Best,

Celeste

---

From: Chris Harrelson <chri...@chromium.org>
Sent: Wednesday, October 21, 2026 8:12 AM
To: Daniel Clark <dan...@microsoft.com>
Cc: blink-dev <blin...@chromium.org>; sligh...@chromium.org <sligh...@chromium.org>; Celeste Pan <celes...@microsoft.com>; Alison Maher <alm...@microsoft.com>; Hoch Hochkeppel (HE/HIM) <mho...@microsoft.com>; Yanling Wang <yanli...@microsoft.com>; Philip Jägenstedt <foo...@chromium.org>

Subject: Re: [blink-dev] Intent to Ship: CSS flow-start and flow-end alignment keywords

 

You don't often get email from chri...@chromium.org. Learn why this is important

[Chris Harrelson]

Excellent!

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/BL4PR00MB24716A96694DD99F2BD1B029D3662%40BL4PR00MB2471.namprd00.prod.outlook.com.

[Daniel Bratell]

LGTM3

/Daniel

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw_PsMxDbKTaNPTbC413DjJ9-f_BKUmOarLoYGvQHGUrsQ%40mail.gmail.com.