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
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
, andgrid-gap
propertiesThe 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 therow-gap
property
grid-column-gap
must be treated as a shorthand for thecolumn-gap
property
grid-gap
must be treated as a shorthand for thegap
propertyIn 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.
end
yet, as of June 2021 Firefox and Opera are the only browser to supportend
.