flex-end和end之间的区别？

Question

当我使用 css 属性 align-items 时，我看不出与 flex-end 的值或 end 的值有任何视觉差异。

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

Answer 1

一个值 (end) 在 CSS Box Alignment specification 中定义，旨在应用于多个框布局模型（块、表格、网格、flex 等）

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

通过 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

Grid Layout 模块最初是用它自己的一组装订线属性编写的，在所有这些属性被统一到现有的row-gap / column-gap 命名之前。为了与旧内容兼容，那些旧属性 必须支持名称作为别名：

• grid-row-gap 必须被视为row-gap 属性的简写

• grid-column-gap 必须被视为column-gap 的简写 属性

• grid-gap 必须被视为gap 属性的简写

在所有三种情况下，旧属性必须采用相同的语法 作为他们别名的属性，并且只是将值“转发”到 它们的别名属性。