Разница между flex-end и end?

Одно значение (end) определено в CSS Спецификация выравнивания коробки и предназначено для применения к нескольким моделям компоновки блоков (блок, таблица, сетка, гибкость и т. д.).

Другое значение (flex-end) определено в CSS спецификация флексбокса и предназначено для применения только к гибкому макету.

С помощью спецификации Box Alignment W3C пытается установить универсальный язык для выравнивания блоков в CSS. В конце концов, значения Box Alignment заменят конкретные значения, определенные в flex, grid и других спецификациях.

Например:

• end будет использоваться вместо flex-end
• column-gap будет использоваться вместо grid-column-gap
• и так далее.

Многие значения Box Alignment уже используются в основных браузерах. Но до полной реализации еще далеко, поэтому все же безопаснее использовать flex-end вместо end (а затем рассчитывать на долгосрочную поддержку устаревших имен).

Вот иллюстрация из спецификации Box Alignment:

§ 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.