Intent to Prototype and Ship: CSS Flexbox: support alignment keywords start, end, self-start, self-end, left, right

[David Grogan]

Contact emails

dgr...@chromium.org

Explainer

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items

Specification

https://drafts.csswg.org/css-align-3/#positional-values

API spec

Yes

Summary

Make flexbox and flex items obey the positional alignment keywords from https://drafts.csswg.org/css-align-3/#positional-values. Flexbox previously only obeyed center, flex-start, and flex-end. The additional alignment keywords (start, end, self-start, self-end, left, right) allow authors to more easily align the flex items in the face of varying writing modes and flex flows.

Blink component

Blink>Layout>Flexbox

Motivation

Without these additional keywords, developers need to change the keyword values whenever they change the writing mode, text direction, or flex reversal properties (flex-direction: row/column-reverse or align-content: wrap-reverse). The keywords implemented here let them set alignment once.

Initial public proposal

None

TAG review

Not needed; Firefox shipped in ~2015 and this has been in the CSS spec since at least then.

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Interop: Blink's implementation matches Firefox as far as I've discovered. WebKit hasn't implemented. Compat: There may be some sites that use these keywords even though Blink haven't supported them until now. In those cases the sites may look different when Blink support rolls out.

Gecko: Shipped/Shipping (https://wpt.fyi/results/css/css-flexbox?label=master&label=experimental&aligned&q=align-content-horiz%20or%20align-content-vert%20or%20align-content-wmvert%20or%20flexbox-justify-content%20or%20flexbox-align-self-vert-002%20or%20flexbox-align-self-vert-rtl-005%20or%20flexbox_justifycontent) Firefox passes all those tests.

WebKit: No signal (https://lists.webkit.org/pipermail/webkit-dev/2021-June/031884.html)

Web developers: Positive (https://crbug.com/1011718) 19 stars on the bug

Activation

Developers can start using these right away in Blink.

Debuggability

Devtools might want to support these keywords in their flexbox editor. https://crbug.com/1217841

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

Yes (link at Gecko section above)

Flag name

Tracking bug

https://crbug.com/1011718

Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/5777880099323904

This intent message was generated by Chrome Platform Status.

[Manuel Rego Casasnovas]

LGTM1, nice to finally support these.

On 09/06/2021 03:11, David Grogan wrote:
>
> Contact emails
>
> dgr...@chromium.org <mailto:dgr...@chromium.org>
>
>
> Explainer
>
> https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content
> <https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content>
> https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items

> <https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items>
>
>
> Specification
>
> https://drafts.csswg.org/css-align-3/#positional-values
> <https://drafts.csswg.org/css-align-3/#positional-values>
>
>
> API spec
>
> Yes
>
>
> Summary
>
> Make flexbox and flex items obey the positional alignment keywords from
> https://drafts.csswg.org/css-align-3/#positional-values

> <https://drafts.csswg.org/css-align-3/#positional-values>. Flexbox

> previously only obeyed center, flex-start, and flex-end. The additional
> alignment keywords (start, end, self-start, self-end, left, right) allow
> authors to more easily align the flex items in the face of varying
> writing modes and flex flows.
>
>
>
> Blink component
>
> Blink>Layout>Flexbox

> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ELayout%3EFlexbox>

>
>
> Motivation
>
> Without these additional keywords, developers need to change the keyword
> values whenever they change the writing mode, text direction, or flex
> reversal properties (flex-direction: row/column-reverse or
> align-content: wrap-reverse). The keywords implemented here let them set
> alignment once.
>
>
>
> Initial public proposal
>
> None
>
>
> TAG review
>
> Not needed; Firefox shipped in ~2015 and this has been in the CSS spec
> since at least then.
>
>
> TAG review status
>
> Not applicable
>
>
> Risks
>
>
>
> Interoperability and Compatibility
>
> Interop: Blink's implementation matches Firefox as far as I've
> discovered. WebKit hasn't implemented. Compat: There may be some sites
> that use these keywords even though Blink haven't supported them until
> now. In those cases the sites may look different when Blink support
> rolls out.
>
>
>
> Gecko: Shipped/Shipping
> (https://wpt.fyi/results/css/css-flexbox?label=master&label=experimental&aligned&q=align-content-horiz%20or%20align-content-vert%20or%20align-content-wmvert%20or%20flexbox-justify-content%20or%20flexbox-align-self-vert-002%20or%20flexbox-align-self-vert-rtl-005%20or%20flexbox_justifycontent

> <https://wpt.fyi/results/css/css-flexbox?label=master&label=experimental&aligned&q=align-content-horiz%20or%20align-content-vert%20or%20align-content-wmvert%20or%20flexbox-justify-content%20or%20flexbox-align-self-vert-002%20or%20flexbox-align-self-vert-rtl-005%20or%20flexbox_justifycontent>)

> Firefox passes all those tests.
>
> WebKit: No signal
> (https://lists.webkit.org/pipermail/webkit-dev/2021-June/031884.html

> <https://lists.webkit.org/pipermail/webkit-dev/2021-June/031884.html>)
>
> Web developers: Positive (https://crbug.com/1011718
> <https://crbug.com/1011718>) 19 stars on the bug

>
>
> Activation
>
> Developers can start using these right away in Blink.
>
>
>
> Debuggability
>
> Devtools might want to support these keywords in their flexbox editor.

> https://crbug.com/1217841 <https://crbug.com/1217841>

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

> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?

>
> Yes (link at Gecko section above)
>
>
> Flag name
>
>
>
> Tracking bug
>

> https://crbug.com/1011718 <https://crbug.com/1011718>

>
>
> Link to entry on the Chrome Platform Status
>
> https://www.chromestatus.com/feature/5777880099323904
> <https://www.chromestatus.com/feature/5777880099323904>
>
> This intent message was generated by Chrome Platform Status

> <https://www.chromestatus.com/>.
>
> --
> 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
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOZbSt12147dVyTSwcHz6vUC7oLx40%2B9BXCNjcS7R9dSng7kMQ%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOZbSt12147dVyTSwcHz6vUC7oLx40%2B9BXCNjcS7R9dSng7kMQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

[Yoav Weiss]

LGTM2

> an email to blink-dev+unsubscribe@chromium.org
> <mailto:blink-dev+unsubscribe@chromium.org>.

[Daniel Bratell]

LGMT3

/Daniel

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/7921c402-d0c6-40d3-a255-50a77da251e9n%40chromium.org.