CSS Box Alignment Module Level 3

[MarcoHengstenberg]

Editor's Draft: https://drafts.csswg.org/css-align-3/

Browser Support at the time of writing:
Opera & Chrome: In development
Rest: Nope

[Schweinepriester]

+1

Via FF52:

• "Implemented flexbox layout for justify-content: space-evenly and align-content: space-evenly" (MDN)
• "Implemented Flexbox layout for align-self|justify-self: [ first | last ]? baseline"

[cvrebert]

• https://platform-status.mozilla.org/#css-box-alignment-block
• https://www.chromestatus.com/feature/6173208034148352
• https://developer.microsoft.com/en-us/microsoft-edge/platform/status/boxalignment/

[tobireif]

+1

[kirilloid]

+1

[sam-s4s]

justify-self please :)

[xerz-one]

+1

[sam-s4s]

Wow this still hasn't been implemented? Dang...

can i use caniuse.com? no... :P

[GPHemsley]

Some of this is now covered by MDN data, others have been covered by caniuse directly:
https://caniuse.com/justify-content-space-evenly
https://caniuse.com/mdn-css_properties_justify-self_grid_context
https://caniuse.com/mdn-css_properties_justify-self_flex_context
https://caniuse.com/mdn-css_properties_justify-content_flex_context
https://caniuse.com/mdn-css_properties_justify-content_grid_context
https://caniuse.com/mdn-css_properties_align-content_flex_context
https://caniuse.com/mdn-css_properties_align-content_grid_context
etc.

(via mdn/browser-compat-data#702, mdn/browser-compat-data#708)

[jensimmons]

Hi everyone. Box alignment for blocks and tables is shipping in Safari 17.4, and Chrome 123!

[jensimmons]

Let's add a page for it.
#6978

[SKaplanOfficial]

As mentioned in mdn/browser-compat-data#20287, Safari and Firefox still lack support for using justify-self and place-self in block-level layouts.

Neither Caniuse nor MDN mention this in their browser support matrix, which is a bit misleading. Caniuse has a note for Safari about absolutely positioned boxes, but that's a separate section in the specification.

A note for Firefox and Safari about lacking block-layer support would help developers avoid unnecessary confusion when non-Chromium browsers behave differently despite appearing fully supported in the go-to references.