html - 嵌套的 flexbox 忽略 flexbasis 并堆叠元素

Question

我想构建一个包含三列的布局。其中两列各包含两行。每个叶项都包含一个 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;
}

代码笔:http://codepen.io/anon/pen/xbJNNQ

Answer 1

您的 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 就没有帮助。