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

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专家都可以提供帮助吗？

Answer 1

2018年2月更新

Firefox和Edge已经同意改变他们在flex(和grid)项的top,bottom margin和padding上的行为:

[...]例如,左/右/上/下百分比都在水平书写模式下解决其包含块的宽度.[ 来源 ]

这尚未实施(在FF 58.0.2上测试).

2016年4月更新

(2017年5月仍有效)

规格已更新为:

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

• 他们自己的轴(左/右百分比分解宽度,顶部/底部解决高度),或,
• 内联轴(左/右/上/下百分比全部解析宽度)

来源:CSS灵活的盒子布局模块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)中对此进行了测试,它们都具有相同的行为.由于第二个孩子的配置是"与往常一样",我认为旧的浏览器(aslo支持flexbox布局模块)将呈现相同的布局.

上一个答案:

根据规格,Firefox有正确的行为

解释:

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

弹性项目的边距和填充百分比始终根据各自的尺寸进行解析; 与块不同,它们并不总是根据其包含块的内联维度来解析.

source dev.w3.org

这意味着填充底部/顶部和边缘底部/顶部是根据容器的高度而不是非Flexbox布局中的宽度计算的.

由于您未在父Flex项目上指定任何高度,因此子项的底部填充应为0px.
这是一个在父级上具有固定高度的小提琴,表示根据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%;
}