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>

调整页面大小时，蓝色元素 根据其宽度保持其纵横比。 这适用于 Chrome 和 IE ，看起来像：

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

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

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

原文由 Simon_Weaver 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2020 年 9 月更新

Firefox 和 edge 已经实现了规范中的行为，flex 元素的边距 + 填充都是根据包含块的 宽度 计算的。

就像块元素一样。

2018 年 2 月更新

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

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

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

2016 年 4 月更新

（ 2017年5月仍然有效）

规格 已更新 为：

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

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

来源： CSS 灵活框布局模块 Level 1

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

规格还说：

作者应该完全避免在弹性项目的填充或边距中使用百分比，因为它们在不同的浏览器中会得到不同的行为。 [ 来源]

---

解决方法

您可以将 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）中对此进行了测试，它们都有相同的行为。由于第二个孩子的配置是“和往常一样”，我想旧的浏览器（也 支持 flexbox 布局模块）将呈现相同的布局。

---

上一个答案

根据 规范，Firefox 的行为是正确的

解释

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

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

来源 dev.w3.org

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

由于您没有在父 flex 项上指定任何高度，因此子项的底部填充应该是 0px。

这是一个在父级上具有固定高度的 小提琴，它显示填充底部是根据 display:flex; 容器的高度计算的。

---

原文由 web-tiki 发布，翻译遵循 CC BY-SA 4.0 许可协议