Difference between flex-end and end?

Question

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?

Answer 1

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.