1

MDN page used as an example (issue was first observed on my own page): https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

align-items: end behaves in a strange way in Chrome and Firefox. Firefox aligns boxes to the bottom edge of the container row, Chrome - to the row top edge. To work around the issue I've switched to flex-end, it gives equivalent alignment on both browsers. But which behavior is (more) correct for the end value?

Alignment difference screenshot from MDN demo

Andrew Boyarshin
  • 13
  • 4

1 Answers1

4

Google Chrome is almost correct (little different). Because the align-items property doesn't have a value of end.

8.3. Cross-axis Alignment: the align-items and align-self properties

  • Name: align-items
  • Value: flex-start | flex-end | center | baseline | stretch
  • Initial: stretch
  • Applies to: flex containers
  • Inherited: no
  • Percentages: n/a
  • Computed value: specified keyword
  • Canonical order: per grammar
  • Animation type: discrete

However, it is not strictly correct. Because the value that can be applied by the align-items property will be replaced by that of Box Alignment Level 3, the align-items property defines a value of end in Box Alignment Level 3.

1.2. Module interactions

The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (justify-content, align-items, align-self, align-content) introduced here.

According to Chrome Platform Status, the implementation status of CSS Box Alignment Level 3 is under development.

Status in Chromium

Blink components: Blink

In development (tracking bug)

Reference:

dmx28192
  • 116
  • 5
  • To sum it up, Firefox currently has _more_ complete implementation of CSS Box Alignment Level 3 (also seen at [blog page from 2017](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)) than Chrome currently has. The workaround I've posted enables the behavior I want on Chrome, since Chrome _does_ implement CSS Flexible Box Layout, older iteration of `align-items` property spec. – Andrew Boyarshin Jan 26 '20 at 09:45
  • @AndrewBoyarshin in addition to this, MDN is confusing because it combine both Spec in the same page making it difficult to understand. Related question with similar issue: https://stackoverflow.com/q/57720598/8620333 / https://stackoverflow.com/q/54490884/8620333 – Temani Afif Jan 26 '20 at 09:57
  • Andrew Boyarshin, @TemaniAfif Thanks for any additional information! – dmx28192 Jan 26 '20 at 10:05