时间戳

首页 > 解决方案 > align-items: end difference between Chrome and Firefox

css - align-items: end difference between Chrome and Firefox

问题描述

MDN page used as an example (issue was first observed on my own page): https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

align-items: end behaves in a strange way in Chrome and Firefox. Firefox aligns boxes to the bottom edge of the container row, Chrome - to the row top edge. To work around the issue I've switched to flex-end, it gives equivalent alignment on both browsers. But which behavior is (more) correct for the end value?

Alignment difference screenshot from MDN demo

标签： cssgoogle-chromefirefoxflexbox

解决方案

谷歌浏览器几乎是正确的（略有不同）。因为该align-items属性的值不为end。

8.3. 跨轴对齐：align-items 和 align-self 属性

  • 名称：对齐项目
  • 值： 弹性开始 | 弹性端 | 中心 | 基线 | 拉紧
  • 初始：拉伸
  • 适用于：弹性容器
  • 继承：无
  • 百分比：不适用
  • 计算值：指定关键字
  • 规范顺序：按语法
  • 动画类型：离散

但是，它并不严格正确。因为该align-items属性可以应用的值将被 Box Alignment Level 3 的值替换，所以该align-items属性定义了endBox Alignment Level 3 中的值。

1.2. 模块交互

CSS 框对齐模块扩展并取代了此处介绍的对齐属性（justify-content、align-items、align-self、align-content）的定义。

根据 Chrome Platform Status，CSS Box Alignment Level 3 的实现状态正在开发中。

Chromium 中的状态

闪烁组件：闪烁

开发中（跟踪错误）

参考：

推荐阅读