flexbox 布局中的 Padding-bottom/top

Question

我有一个包含两个项目的 flexbox 布局。其中之一使用 padding-bottom ：

#flexBox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
}
#text {
  border: 1px solid green;
  padding: .5em;
}
#padding {
  margin: 1em 0;
  border: 1px solid blue;
  padding-bottom: 56.25%; /* intrinsic aspect ratio */
  height: 0;
}

<div id='flexBox'>
  <div id='padding'></div>
  <div id='text'>Some text</div>
</div>

调整页面大小时的蓝色元素maintains its aspect ratio according to its width。 这适用于 Chrome 和 IE，看起来像：

但是，在 Firefox 和 Edge 中，我得到以下信息（它忽略了蓝色框上的填充，这是保持纵横比的原因）：

我对 flexbox 太陌生了，无法真正理解这是否应该工作。 flexbox 的全部意义在于调整大小，但我不确定为什么它会忽略内部填充，并将绝对大小放在蓝色元素上。

我想最终我什至不确定 Firefox 或 Chrome 是否在做正确的事情！任何 Firefox flexbox 专家可以提供帮助吗？

Answer 1

2020 年 9 月更新

FireFox 和 edge 实现了规范中的行为，flex 元素的边距 + 内边距都是根据包含块的 宽度 计算的。
就像块元素一样。

2018 年 2 月更新

Firefox 和 edge 已同意更改它们在 flex（和网格）项目的顶部、底部边距和填充上的行为：

[...] 例如在水平书写模式下，左/右/上/下百分比都根据其包含块的宽度解析。 [source]

这尚未实现（在 FF 58.0.2 上测试）。

2016 年 4 月更新

(still valid in may 2017)

规格有been updated到：

弹性项目的百分比边距和内边距可以通过以下任一方式解决：

• 他们自己的轴（左/右百分比根据宽度解析，顶部/底部根据高度解析），或者，
• 内联轴（左/右/上/下百分比都根据宽度解析）

来源：CSS Flexible Box Layout Module Level 1

这意味着 chrome IE FF 和 Edge（即使它们没有相同的行为）遵循规范建议。

规格还说：

作者应避免在 flex 的填充或边距中使用百分比 项目完全不同，因为它们会在不同的环境中获得不同的行为 浏览器。 [source]

---

解决方法：

您可以将 flex 容器的第一个子元素包装在另一个元素中，并将 padding-bottom 放在第二个子元素上：

#flexBox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
}
#text {
  border: 1px solid green;
  padding: .5em;
}
#padding {
  margin: 1em 0;
  border: 1px solid blue;
}
#padding > div {
  padding-bottom: 56.25%; /* intrinsic aspect ratio */
}

<div id='flexBox'>
  <div id='padding'><div></div></div>
  <div id='text'>Some text</div>
</div>

我在现代浏览器（IE、chrome、FF 和 Edge）中对此进行了测试，它们都有相同的行为。由于第二个孩子的配置是“和往常一样”，我想旧的浏览器（也就是support flexbox layout module）会呈现相同的布局。

---

上一个答案：

根据specs，Firefox 的行为是正确的

解释：

与根据容器宽度计算其边距/填充百分比的块项目不同，在弹性项目上：

弹性项目上的百分比边距和填充总是被解决 针对它们各自的尺寸；与块不同，它们并不总是 解决其包含块的内联维度。

source dev.w3.org

这意味着 padding-bottom/top 和 margin-bottom/top 是根据容器的高度计算的，而不是像非 flexbox 布局那样的宽度。

由于您没有在父 flex 项上指定任何高度，因此子项的底部填充应该是 0px。
这是一个fiddle，在父级上具有固定高度，表明填充底部是根据display:flex; 容器的高度计算的。

---

Answer 2

接受的答案是正确的，但我通过使用伪元素而不是在 HTML 中添加新元素来改进解决方案。

示例：http://jsfiddle.net/4q5c4ept/

HTML：

<div id='mainFlexbox'>
  <div id='videoPlaceholder'>
    <iframe id='catsVideo' src="//www.youtube.com/embed/tntOCGkgt98?showinfo=0" frameborder="0" allowfullscreen></iframe>
  </div>
  <div id='pnlText'>That's cool! This text is underneath the video in the HTML but above the video because of 'column-reverse' flex-direction.    </div>
</div>

CSS：

#mainFlexbox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column-reverse;
}
#pnlText {
  border: 1px solid green;
  padding: .5em;
}
#videoPlaceholder {
  position: relative;
  margin: 1em 0;
  border: 1px solid blue;
}
#videoPlaceholder::after {
  content: '';
  display: block;
  /* intrinsic aspect ratio */
  padding-bottom: 56.25%;
  height: 0;
}
#catsVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 3

我使用 vh 而不是 % 在 Safari、Firefox 和 Edge 中完美运行