为什么Chrome和Firefox显示不同的Flex布局结果? [英] Why do Chrome and Firefox show different flex layout results?

问题描述

当弹性项目"只有一行时，Chrome和Firefox显示不同的结果.如果有多行(自动换行)，Chrome和Firefox会显示相同的结果！

When there is only one row of "flex items", Chrome and Firefox show different results. When there is more than one line(wrap), Chrome and Firefox show the same result!

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

So why is this happening? Is that a bug, or is there some "default value" or difference that I am missing?

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>

推荐答案

问题的根源

这是问题的根源:

Source of the Problem

Here is the source of the problem:

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

---

背景

align-content 属性控制十字架容器内 flex线的轴向对齐.将弹性线视为行或列(取决于 flex-direction )中包含弹性项目.换句话说，align-content在柔性线之间及其周围分布空间，并将其打包到顶部，底部，中心等(请参见

---

Background

The align-content property controls the cross-axis alignment of flex lines within the flex container. Think of flex lines as the rows or columns (depending on flex-direction) in which flex items live. Put another way, align-content distributes the space between and around flex lines, packing them to the top, bottom, center, etc. (see the full list of values).

由于align-content在弹性线之间和周围分布空间，因此只能在多线弹性容器上使用. (单行在容器的整个横轴长度上延伸，没有align-content的可用空间.)

Because align-content distributes space between and around flex lines, it can only work on multi-line flex containers. (A single-line extends across the full cross-axis length of the container leaving no free space for align-content to work.)

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

Obviously, a multi-line container is a container with more than one line (flex items have wrapped). Technically, however, a multi-line container is simply a container with flex-wrap: wrap or flex-wrap: wrap-reverse (regardless of whether flex items have wrapped, or even exist).

相同的概念适用于单行flex容器，它是带有flex-wrap: nowrap的容器.如上所述，align-content属性在nowrap容器中无效.

Same concept applies to a single-line flex container, which is a container with flex-wrap: nowrap. The align-content property has no effect in nowrap containers, as discussed above.

§ 8.4.包装伸缩线:align-content 财产

align-content属性可将Flex容器的行对齐 当横轴上有多余的空间时，伸缩容器 类似于justify-content如何在 主轴. 请注意，此属性对单行伸缩没有影响 容器.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

§ 6. Flex 行

§ 6. Flex Lines

flex容器中的flex项目布置并在 flex中对齐 行，假设容器用于分组和对齐 布局算法. flex容器可以是单行或 多行，具体取决于flex-wrap属性:

Flex items in a flex container are laid out and aligned within flex lines, hypothetical containers used for grouping and alignment by the layout algorithm. A flex container can be either single-line or multi-line, depending on the flex-wrap property:

• 一个单行flex容器(即一个带有flex-wrap: nowrap的容器)将其所有子级布置在一行中，即使这样做会 导致其内容溢出.

• A single-line flex container (i.e. one with flex-wrap: nowrap) lays out all of its children in a single line, even if that would cause its contents to overflow.

多行伸缩容器(即带有flex-wrap: wrap或flex-wrap: wrap-reverse的伸缩容器)将其伸缩项跨多行中断，类似于文本在以下情况下如何分行换行它变得太宽而无法容纳现有的生产线.

A multi-line flex container (i.e. one with flex-wrap: wrap or flex-wrap: wrap-reverse) breaks its flex items across multiple lines, similar to how text is broken onto a new line when it gets too wide to fit on the existing line.

---

Chrome和Firefox/Edge之间的差异

再次查看您的代码:

---

The Discrepancy between Chrome and Firefox / Edge

Looking again at your code:

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>

注意三件事:

(1)没有实际的包装.所有这四个项目都在一行上. flex容器只有一行.

(1) There is no actual wrapping. All four items exist on one line. The flex container has one line.

(2)flex-wrap属性设置为wrap(在flex-flow速记中).

(2) The flex-wrap property is set to wrap (in the flex-flow shorthand).

(3)align-content属性设置为flex-start.

让我们分解一下.

由于flex容器中只有一行，因此Chrome忽略了align-content.如规范中所述(请参见上文):

Because there is only a single line in the flex container, Chrome is ignoring align-content. As written in the specification (see above):

align-content属性对单行伸缩容器没有影响.

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

So this is Chrome's interpretation. If there is an actual single line, then ignore align-content.

在Chrome中在wrap和nowrap之间切换.没有区别.

Switch between wrap and nowrap in Chrome. There's no difference.

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

On the other hand, because the container is set to flex-wrap: wrap, this technically creates a multi-line flex container, as far as Firefox and Edge are concerned. The actual wrapping or existence of flex items is irrelevant.

如规范中所述(请参见上文):

As written in the specification (see above):

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

A multi-line flex container (i.e. one with flex-wrap: wrap or flex-wrap: wrap-reverse) breaks its flex items across multiple lines...

在Firefox和Edge中在wrap和nowrap之间切换.有区别.

Switch between wrap and nowrap in Firefox and Edge. There's a difference.

因此，每个浏览器都有实现这种渲染行为的自己的方式.

So each browser has it's own way of implementing this rendering behavior.

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

In terms of adherence to the specification, I would say that Firefox and Edge are at full compliance. They seem to adhere most closely to the wording in the spec.

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

However, I wouldn't characterize Chrome's behavior as a "bug". What they've done is more likely an intervention.

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

An intervention is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.

干预似乎是Chrome的标准做法.例子:

Interventions appear to be standard practice at Chrome. Examples:

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

• Why don't flex items shrink past content size?
• flex-shrink discrepancy between Firefox and Chrome
• Why are percentage heights working on children when the parent has no height defined?
• pseudo element not aligning at top left corner
• Google Chrome viewport-anchored expand direction with flexbox
• How to make images stay within the rows of a css grid container?
• Flex items overlapping in Chrome and IE11
• Why is content overflowing in flexbox?
• Child div height exceeds flex parent height in Firefox but not Chrome

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

这篇关于为什么Chrome和Firefox显示不同的Flex布局结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！