Difference between flex-end and end?

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?

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.