96

When I use the css property align-items, I cannot see any visual difference with the value of flex-end or value of end.

What is the difference between align-items: end and align-items: flex-end?

2
  • 4
    At time of writing they seem to look the same in Firefox but not in Chrome. Was a puzzle until I found this v. helpful Q&A.
    – Craig.C
    Commented Apr 19, 2020 at 20:53
  • 2
    @Craig.C yeah same here, FYI for anyone wondering about that - Chrome doesn't support end yet, as of June 2021 Firefox and Opera are the only browser to support end. Commented Jun 14, 2021 at 13:10

1 Answer 1

132

One value (end) is defined in the CSS Box Alignment specification, and is intended to apply to multiple box layout models (block, table, grid, flex, etc.)

The other value (flex-end) is defined in the CSS flexbox specification, and is intended to apply only to flex layout.

With the Box Alignment spec, the W3C is attempting to establish a universal language for the alignment of boxes in CSS. Eventually, the Box Alignment values will supersede the particular values defined in flex, grid and other specs.

For example:

  • end will be used instead of flex-end
  • column-gap will be used instead of grid-column-gap
  • and so on.

Many Box Alignment values are already in use across major browsers. But full implementation is still a ways off, so it's still safer to use flex-end instead of end (and then count on long-term support for legacy names).

Here's an illustration from the Box Alignment spec:

§ 8.3. Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties

The Grid Layout module was originally written with its own set of gutter properties, before all such properties were unified into the existing row-gap / column-gap naming. For compatibility with legacy content, those legacy property names must be supported as aliases:

  • grid-row-gap must be treated as a shorthand for the row-gap property

  • grid-column-gap must be treated as a shorthand for the column-gap property

  • grid-gap must be treated as a shorthand for the gap property

In all three cases, the legacy properties must take the same grammar as the property they are aliasing, and just "forward" the value to their aliased property.

Not the answer you're looking for? Browse other questions tagged or ask your own question.