flex-end和end之间的区别？

Posted 2023-03-05

【中文标题】flex-end和end之间的区别？

【英文标题】：Difference between flex-end and end?

【发布时间】：2019-07-06 08:01:03

【问题描述】：

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

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

【问题讨论】：

在撰写本文时，它们在 Firefox 中看起来相同，但在 Chrome 中却不同。在我发现这个 v. 有用的问答之前一直是个谜。

@Craig.C 是的，这里也一样，仅供任何想知道这一点的人参考 - Chrome 尚不支持 end，截至 2021 年 6 月，Firefox 和 Opera 是唯一支持 end 的浏览器。

【参考方案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 属性的简写

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