嵌套的柔性箱会忽略柔性和堆叠物品

我想建立一个三列的布局。 其中两列将分别包含两行。 每个叶子项目将包含一个div，我用于显示背景图像。

主div应该保持它的比率，因为它有一个填充底部：xx％属性。

为什么flexbox堆叠行项目？ 为什么它会忽略flex属性中的弹性基础？

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

---

你的编号被转换成了类。

  <div class="col_left">
    <div class="vertical_large" >

这codepen说明了一些必要的修复，以接近我相信你在谈论的内容。

不要粗鲁，但如果你不确定何时使用class或id，那么你应该从html / css开始。 然后解决flexbox。

添加填充到flexbox底部与保持宽高比无关。

Flexbox不堆叠行。

弹性基础问题是一个很好的问题。 这有点棘手。 所以你正在创建一个大小为100的元素。 不幸的是，HTML没有一些神奇的方式来理解背景应该包含在父级的大小中。 100％是自我与父母的关系。 如果我以100％的父母大小展示背景......如果我的父母大小为0，则无法提供帮助。

链接地址: http://www.djcxy.com/p/75675.html

上一篇: nested flexbox ignores flexbasis and stacks items

下一篇: align flex item?