填充底部/顶部在flexbox布局

我有一个包含两个项目的flexbox布局 。 其中之一使用填充底部 ：

#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的重点是resize，但我不确定为什么忽略内在填充，并将绝对大小放在蓝色元素上。

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

Answer 1

更新2016年4月

（ 在2017年5月仍有效 ）

规格已更新为：

弹性项目上的边距和填充百分比可以通过以下两种方式来解决：

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

来源： 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> 

Answer 2

接受的答案是正确的，但我通过使用伪元素，而不是在HTML中添加一个新的元素，改善了解决scheme。

例如： 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中完美工作

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*/; }