css - flex-end 和 end 的区别？

Question

当我使用 css 属性 align-items 时，我看不到 flex-end 值或 end 值有任何视觉差异>.

align-items: end 和 align-items: flex-end 有什么区别？

Answer 1

在 CSS Box Alignment specification 中定义了一个值 (end) , 旨在应用于多种盒子布局模型( block 、表格、网格、 flex 等)

另一个值 (flex-end) 在 CSS 中定义 flexbox specification , 并且仅适用于 flex 布局。

通过盒子对齐规范，W3C 正试图为 CSS 中的盒子对齐建立一种通用语言。最终，Box Alignment 值将取代 flex、grid 和其他规范中定义的特定值。

例如:

• end 将被用来代替 flex-end
• column-gap 将被用来代替 grid-column-gap
• 等等。

许多 Box Alignment 值已经在主要浏览器中使用。但是完全实现还有一段路要走，所以使用 flex-end 而不是 end 仍然更安全(然后依靠对遗留名称的长期支持)。

这是来自方框对齐规范的插图:

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