我有一个包含两个项目的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专家能帮上忙吗?
发布于 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%;
}
发布于 2016-03-21 04:28:23
我使用的是vh,而不是在Safari、Firefox和Edge中完美工作的%
https://stackoverflow.com/questions/23717953
复制相似问题