flex-end和end之间的区别?

时间:2019-02-12 15:58:19

标签: css css3 flexbox alignment

使用css属性align-items时,看不到flex-endend的任何视觉差异。

align-items: endalign-items: flex-end有什么区别?

1 个答案:

答案 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, and grid-gap properties

     

在将所有此类属性统一到现有row-gap / column-gap命名之前,Grid Layout模块最初是使用其自身的装订线属性集编写的。为了与遗留内容兼容,这些遗留属性   名称必须支持作为别名:

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

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

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

  •   
     

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