nested flexbox ignores flexbasis and stacks items
I want to build a layout with three columns. Two of these columns will each contain two rows. Each leaf-item will contain a div that I use for displaying a background image.
The main div should keep its ratio therefor it has a padding-bottom:xx% attribute.
Why does flexbox stack the row items? And why does it ignore the flex-basis in the flex attribute?
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;
}
codepen: http://codepen.io/anon/pen/xbJNNQ
You're id's were converted to classes.
<div class="col_left">
<div class="vertical_large" >
This codepen illustrates some of the fixes necessary to approach what I believe you're talking about.
Not to be rude but if you're not sure when to use class or id then you should start at html/css basis. Then tackle flexbox.
Adding padding to bottom of flexbox has nothing to do with keeping aspect ratio.
Flexbox was not stacking the rows.
The flex-basis question was a great one. This is kind of tricky. So you were creating a 100% of 0 size elements. Unfortunately html doesn't have some magic way of understanding that the background should be included within the sizing of the parent. 100% is a relation of self to parent. If I'm showing a background at 100% of my parent's size... it doesnt help if my parent is size 0.
链接地址: http://www.djcxy.com/p/75676.html下一篇: 嵌套的柔性箱会忽略柔性和堆叠物品