填充- flexbox布局中的底部/顶部
填充- flexbox布局中的底部/顶部
提问于 2014-05-18 10:22:25
我有一个包含两个项目的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的全部意义在于调整对象的大小，但是我不确定为什么它忽略了内部的填充，而把绝对大小放在了蓝色元素上。
我想最终我甚至不确定火狐或Chrome做的是不是正确的事情！火狐flexbox专家能帮上忙吗？
回答 2
Stack Overflow用户
发布于 2015-01-22 04:42:21
公认的答案是正确的，但我改进了解决方案，使用了伪元素，而不是在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%;
}Stack Overflow用户
发布于 2016-03-21 04:28:23
我使用的是vh，而不是在Safari、Firefox和Edge中完美工作的%
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23717953
复制相关文章
相似问题