为什么Chrome和Firefox显示不同的Flex布局结果？

Question

当只有一行“弹性项目”时，Chrome和Firefox显示不同的结果。当有多行（换行）时，Chrome和Firefox显示相同的结果！

那么为什么会这样呢？那是一个错误，还是我缺少一些“默认值”或差异？

body{
    background-color: teal;
}

.flexContainer{
    background-color: blue;
    border: 1px solid black;
    height: 300px;
}
.flexItem{
    background-color: red;
    border: 1px solid black;
}

.flexContainer{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
}

.flexItem{ 
    flex: 0 1 0; 
}

<div class="flexContainer">
    <div class="flexItem">1111111111111111111</div>
    <div class="flexItem">2222<br/>2222</div>
    <div class="flexItem">3333<br/>3333<br/>3333</div>
    <div class="flexItem">4444444444444444444</div>
</div>

Answer 1

问题的根源

这是问题的根源：

.flexContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start; <-- problem
}

背景

该align-content属性控制flex容器内的flex 线的横轴对齐。将弹性线视为弹性项目所在的行或列（取决于flex-direction）。换句话说align-content，在柔性线之间及其周围分布空间，并将其打包到顶部，底部，中心等（请参见值的完整列表）。

由于在伸缩线之间及其周围align-content分布空间，因此只能在多线伸缩容器上工作。（一条直线在容器的整个横轴长度上延伸，没有可用的工作空间。）align-content

显然，多行容器是具有多个行的容器（包装了柔性物品）。但是，从技术上讲，多行容器只是具有flex-wrap: wrap或flex-wrap: wrap-reverse的容器（无论弹性物品是否包装或什至存在）。

相同的概念适用于单行flex容器，即具有的容器flex-wrap: nowrap。如上所述，该align-content属性对nowrap容器没有影响。

第8.4节 包装伸缩线：align-content 属性

align-content当横轴上有多余的空间时，此属性会在Flex容器内将Flex容器的线justify-content对齐，类似于在主轴内对齐单个项目的方式。注意，此属性对单行flex容器无效。

§6.伸缩线

将flex容器中的flex项进行布局并在flex线内对齐，这些假定的容器通过布局算法用于分组和对齐。flex容器可以是单行或多行，具体取决于flex-wrap属性：

• 一个单行柔性容器（即一个有flex-wrap: nowrap）勾画出其所有的孩子在一个单一的线，即使这会导致其内容溢出。

• 一个多线柔性容器（即具有flex-wrap: wrap或flex-wrap: wrap-reverse）打破了多行，类似于如何当它变得太宽，以适应现有行文本被分解到新的行其弯曲的物品。

Chrome与Firefox / Edge之间的差异

再次查看您的代码：

.flexContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start; <-- problem
}

body {
  background-color: teal;
}

.flexContainer {
  background-color: blue;
  border: 1px solid black;
  height: 300px;
}

.flexItem {
  background-color: red;
  border: 1px solid black;
}

.flexContainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
}

.flexItem {
  flex: 0 1 0;
}

注意三件事：

（1）没有实际包装。所有这四个项目都在一行上。flex容器只有一行。

（2）该flex-wrap属性设置为wrap（flex-flow简写）。

（3）该align-content属性设置为flex-start。

让我们分解一下。

由于flex容器中只有一行，因此Chrome忽略了align-content。如规范中所写（参见上文）：

该align-content属性对单行flex容器无效。

这就是Chrome的解释。如果存在实际的单行，则忽略align-content。

在wrap和之间切换nowrap。没有区别

另一方面，由于容器设置为flex-wrap: wrap，从技术上讲，就Firefox和Edge而言，这将创建多行flex容器。柔性物品的实际包装或存在与否无关。

如规范中所写（参见上文）：

多行flex容器（即带有flex-wrap: wrap或的容器flex-wrap: wrap-reverse）将其flex项分解为多行...

间切换wrap，并nowrap在Firefox和边缘。有区别。

因此，每个浏览器都有自己的方式来实现此呈现行为。

符合标准

在遵守规范方面，我要说Firefox和Edge完全兼容。他们似乎最遵守规范中的措辞。

但是，我不会将Chrome的行为描述为“错误”。他们所做的很可能是干预。

干预是指用户代理决定稍微偏离标准行为以提供大大增强的用户体验。

干预似乎是Chrome的标准做法。例子：

• 为什么弹性项目不能缩小到超过内容大小？
• Firefox和Chrome之间的flex-shrink差异
• 当父母没有定义身高时，为什么百分比高度对孩子起作用？
• 伪元素未在左上角对齐
• 用Flexbox固定的Google Chrome视口扩展方向
• 如何使图像停留在CSS网格容器的行内？
• Flex项目在Chrome和IE11中重叠
• 为什么内容在flexbox中溢出？
• 子div高度超过Firefox中的flex父高度，但不超过Chrome

更多信息

• flex-wrap如何与align-self，align-items和align-content一起使用？