flex-end和end之间的区别？

Posted 2021-03-27

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

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

答案

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

另一个值（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

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

• grid-row-gap必须被视为row-gap财产的简写
• grid-column-gap必须被视为column-gap财产的简写
• grid-gap必须被视为gap财产的简写

在所有这三种情况下，遗留属性必须采用与它们别名的属性相同的语法，并将值“转发”到它们的别名属性。