使用css属性align-items
时,看不到flex-end
或end
的任何视觉差异。
align-items: end
和align-items: flex-end
有什么区别?
答案 0 :(得分:4)
在CSS Box Alignment specification中定义了一个值(end
),旨在应用于多个框布局模型(块,表,网格,弹性等)
另一个值(flex-end
)在CSS flexbox specification中定义,并且仅适用于Flex布局。
通过Box Alignment规范,W3C试图建立一种通用语言来对齐CSS中的盒子。最终,“框对齐”值将取代在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
, andgrid-gap
properties在将所有此类属性统一到现有
row-gap
/column-gap
命名之前,Grid Layout模块最初是使用其自身的装订线属性集编写的。为了与遗留内容兼容,这些遗留属性 名称必须支持作为别名:
grid-row-gap
必须被视为row-gap
属性的简写
grid-column-gap
必须视为column-gap
的简写 属性
grid-gap
必须被视为gap
属性的简写在所有三种情况下,旧版属性必须采用相同的语法 作为其别名的属性,并将值“转发”到 他们的别名属性。