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;
}

codepen：http://codepen.io/anon/pen/xbJNNQ

Answer 1

你的身份被转换为班级。

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

此codepen说明了解决我相信您所谈论的内容所需的一些修复。

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

在flexbox底部添加填充与保持纵横比无关。

Flexbox没有堆叠行。

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

嵌套的flexbox忽略flexbasis并堆叠项目

1 个答案: