Question

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

调整页面大小时的蓝色元素maintains its aspect ratio according to its width。 适用于Chrome和IE ，如下所示：

然而，在 Firefox 和 Edge 中，我得到以下内容（它忽略了蓝色框上的填充，这是保持宽高比的原因）：

我对flexbox来说太新了，不能真正理解这应该或不应该工作。 flexbox的重点是调整大小，但我不确定为什么它忽略了内部填充，并将绝对大小放在蓝色元素上。

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

Answer 1

2018年2月更新

Firefox和Edge已经同意改变他们在弹性（和网格）项目的顶部，底部边距和填充上的行为：

[...]例如left / right / top / bottom百分比都在水平书写模式下解析其包含块的宽度。 [source]

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

2016年4月更新

（still valid in may 2017）

规格有been updated来：

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


他们自己的轴（左/右百分比分解宽度，顶部/底部分辨高度），或，

内联轴（左/右/上/下百分比全部解析宽度）

来源：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）中对此进行了测试，它们都具有相同的行为。由于第二个孩子的配置与“平常一样”，我认为旧浏览器（aslo support flexbox layout module）将呈现相同的布局。

上一个回答：

根据specs，Firefox有正确的行为

解释：

与根据容器宽度计算其％边距/填充的块项目不同，在flex项目上：

始终解决弹性项目上的百分比边距和填充违背各自的规模;与块不同，它们并不总是如此解决其包含块的内联维度。

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＆amp;边缘

Answer 4

    <div class="flex-parent">
      <div class="flexchild">
        <div class="pad"></div>
      </div>
    </div>  

.flex-child{
   height:100%;
}
.padd{
   padding-top:100% /* write 100%, or instead your value*/;
}

在flexbox布局中填充底部/顶部

4 个答案:

2018年2月更新

解决方法：

解释：