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

87 views
Skip to first unread message

David Grogan

unread,
Jun 8, 2021, 9:11:41 PM6/8/21
to blink-dev

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

unread,
Jun 9, 2021, 3:40:23 AM6/9/21
to David Grogan, blink-dev
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://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

unread,
Jun 9, 2021, 3:55:14 AM6/9/21
to blink-dev, Manuel Rego, David Grogan

Daniel Bratell

unread,
Jun 9, 2021, 4:46:28 AM6/9/21
to Yoav Weiss, blink-dev, Manuel Rego, David Grogan

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.
Reply all
Reply to author
Forward
0 new messages