我想构建一个包含三列的布局。 其中两列各包含两行。 每个叶项都包含一个 div,我用它来显示背景图像。
主 div 应保持其比例,因为它具有 padding-bottom:xx% 属性。
为什么 flexbox 会堆叠行元素? 以及为什么它会忽略 flex 属性中的 flex-basis?
html:
<div class="vodReco_hub">
<div id="col_left">
<div id="vertical_large" >
<div id="image_box"
style="background-image:url('http://lorempixel.com/400/400/')"></div>
</div>
</div>
<div id="col_mid">
<div id="horizontal_medium_top">
<div id="image_box"
style="background-image:url('http://lorempixel.com/400/400/')"></div>
</div>
<div id="horizontal_medium_bottom">
<div id="image_box"
style="background-image:url('http://lorempixel.com/400/400/')"></div>
</div>
</div>
<div id="col_right">
<div id="horizontal_small_top">
<div id="image_box"
style="background-image:url('http://lorempixel.com/400/400/')"></div>
</div>
<div id="horizontal_small_bottom">
<div id="image_box"
style="background-image:url('http://lorempixel.com/400/400/')"></div>
</div>
</div>
</div>
CSS:
.vodReco_hub
{
position: relative;
width: 100%;
padding-bottom: 50%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: blue;
}
.vodReco_hub #image_box
{
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-color: yellow;
}
.vodReco_hub #col_left
{
flex-basis: 38%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.vodReco_hub #col_mid
{
flex-basis: 38%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.vodReco_hub #col_right
{
flex-basis: 24%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
最佳答案
您的 ID 已转换为类。
<div class="col_left">
<div class="vertical_large" >
这codepen说明了一些必要的修复,以实现我认为您正在谈论的内容。
不要太粗鲁,但如果您不确定何时使用类或 ID,那么您应该从 HTML/CSS 基础知识开始,然后再学习 flexbox。
在 flexbox 的底部添加 padding 与保持宽高比无关。
Flexbox 没有堆叠行。
flex 基础问题是一个很好的问题。这有点棘手。所以你正在创建一个 100% 的 0 尺寸元素。不幸的是,HTML 没有某种神奇的方式来理解背景应该包含在父元素的尺寸范围内。 100% 是 self 与 parent 的关系。如果我显示的背景是我 parent 尺寸的 100%...如果我 parent 的尺寸是 0 就没有帮助。
关于html - 嵌套的 flexbox 忽略 flexbasis 并堆叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28883799/