现在,所有主流浏览器引擎均支持 CSS 网格和 flexbox 中的最后一条基线对齐。
浏览器支持
- 108
- 108
- 52 页
- 16.2
现在,所有主要引擎都支持使用 first
和 last
关键字实现一致性。这意味着,在对齐多组弹性或网格项时,我们可以将最后的基线对齐用作另一个选项。
第一条基线对齐
如果将 align-items
的值设置为 baseline
,则结果将是第一个基线对齐。因此,您要校准的项的第一个基准(描述为校准对象)将与组中其他项的第一个基准保持一致。在下面的示例中可以看到这一点,其中前两个 Flex 项使用 align-items: baseline
对齐,因此它们沿较大文本创建的基线对齐。最终项与 flex-start
对齐,因此也与 Flex 容器的开头对齐。
上次基线对齐
将网格或弹性项与值 last baseline
对齐时,该项的最后一条基线将与其所属的基准共享组的最后一条基线对齐。下面的示例演示了最后一条基线对齐,其中第一个弹性项与较大项中的最后一行文本对齐。该组中的最后一项与 flex-end
对齐,即 Flex 容器的末尾。
后备广告对齐方式
如果对齐主题没有要对齐的基线共享组,那么将使用后备对齐。对于 baseline
和 first baseline
,回退对齐方式为 start
;对于 last baseline
,后备对齐方式为 end
。