← Back to release summary

CSS Flexbox: support alignment keywords start, end, self-start, self-end, left, right

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 93)
Intent stage
Shipped

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.

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.

Standards & signals

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

View on chromestatus.com