flex-end 和 end 的区别? [英] Difference between flex-end and end?

问题描述

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

When I use the css property align-items, I cannot see any visual difference with the value of flex-end or value of end.

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

推荐答案

一个值 (end) 定义在 CSS 框对齐规范，旨在应用于多种框布局模型(块、表格、网格、弹性等)

One value (end) is defined in the CSS Box Alignment specification, and is intended to apply to multiple box layout models (block, table, grid, flex, etc.)

另一个值 (flex-end) 定义在 CSS flexbox 规范，仅适用于 flex 布局.

The other value (flex-end) is defined in the CSS flexbox specification, and is intended to apply only to flex layout.

通过 Box Alignment 规范，W3C 正在尝试为 CSS 中的框对齐建立一种通用语言.最终，Box Alignment 值将取代 flex、grid 和其他规范中定义的特定值.

With the Box Alignment spec, the W3C is attempting to establish a universal language for the alignment of boxes in CSS. Eventually, the Box Alignment values will supersede the particular values defined in flex, grid and other specs.

例如:

• end 将代替 flex-end
• column-gap 将代替 grid-column-gap
• 等等.

许多框对齐值已在主要浏览器中使用.但是完全实现还有很长的路要走，因此使用 flex-end 而不是 end 仍然更安全(然后依靠对旧名称的长期支持).

Many Box Alignment values are already in use across major browsers. But full implementation is still a ways off, so it's still safer to use flex-end instead of end (and then count on long-term support for legacy names).

这是框对齐规范中的插图:

Here's an illustration from the Box Alignment spec:

§8.3.传统间隙属性:grid-row-gap，grid-column-gap 和 grid-gap 属性

§ 8.3. Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties

Grid Layout 模块最初是用它自己的一组 gutter 属性编写的，然后所有这些属性都统一到现有的 row-gap/column-gap 命名中.为了与遗留内容兼容，那些遗留属性必须支持名称作为别名:

The Grid Layout module was originally written with its own set of gutter properties, before all such properties were unified into the existing row-gap / column-gap naming. For compatibility with legacy content, those legacy property names must be supported as aliases:

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

• grid-row-gap must be treated as a shorthand for the row-gap property

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

grid-column-gap must be treated as a shorthand for the column-gap property

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

grid-gap must be treated as a shorthand for the gap property

在所有三种情况下，遗留属性必须采用相同的语法作为它们别名的属性，只需将值转发"到他们的别名属性.

In all three cases, the legacy properties must take the same grammar as the property they are aliasing, and just "forward" the value to their aliased property.

这篇关于flex-end 和 end 的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！