Flexbox嵌套列

Question

我正在尝试将一些flexbox列嵌套在flexbox中。 我有这个HTML：

<video type="video/swf" controls >

 <source type="video/swf" src="The source of the video should be here ." />
</video>

我的CSS是这样的：

<div class="container">
  <div class="row flex height">
    <div class="col-md-6 red">
    </div>
    <div class="col-md-6 orange">

      <div class="flex flex-columns">
        <div class="row black flex">
          <div class="col-md-3 yellow">
          </div>
          <div class="col-md-9 green">
          </div>
        </div>

        <div class="row white flex">
          <div class="col-md-6 blue">
          </div>
          <div class="col-md-6 indigo">
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

这是一个说明我想要实现的目标的图表：

这是我的代码：http://codepen.io/r3plica/pen/PqWqKx?editors=110

希望你能理解我想要做什么，但我无法让它正常工作。 有人可以帮忙吗？

Answer 1

如果我理解得很好，你想要

.flex-columns {  
  display: flex;
  flex-direction: row;
}
.row {
  flex: 1;
}

@import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
.flex {
  min-height: 500px;
  box-sizing: border-box;
  display: flex;
}
.flex-columns {  
  box-sizing: border-box;
  display: flex;
  align-content: stretch;
}
.row {
  flex: 1;
  margin: 0; /* Remove stupid bootstrap margins */
}
.red    { background-color: red;    }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green  { background-color: blue;   }
.blue   { background-color: orange; }
.indigo { background-color: indigo; }
.violet { background-color: violet; }
.black  { background-color: black;  }
.white  { background-color: white;  }

<div class="container">
  <div class="row flex">
    <div class="col-md-6 red">
    </div>
    <div class="col-md-6 orange">
      <div class="flex flex-columns">
        <div class="row black"></div>
        <div class="row violet"></div>
      </div>
    </div>
  </div>
</div>

Answer 2

我修改了你的HTML和CSS，使结果适合图像（尽管颜色）。

1. 为每个div添加了flex-grow
2. 为某些flex项添加row，让他们填充父母（通过向他们添加div.flex.flex-columns课程）
3. 已移除class并将其div.col-md-6.orange.flex.flex-columns更改为其父级，因此会更改为flex-grows。这是一个超级麻烦，搞乱你的布局。
4. 修改紫色div的{​​{1}}（图片中）以更改其比率

您可以运行以下代码段来查看结果。 内部div仍然需要一些填充来真正模仿图像，但我猜这不是你问题的主要观点。

＆＃13;
＆＃13;
.container {
  border: 1px solid pink;
}
div {
  padding: 10px;
}
.height {
  min-height: 500px;
}
.flex {
  box-sizing: border-box;
  display: flex;
}
.flex-columns {
  display: flex;
  flex-direction: column;
}
.row {
  flex: 1;
}
.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
  flex-grow: 2;
}
.green {
  background-color: green;
  flex-grow: 3;
}
.blue {
  background-color: blue;
  flex-grow: 3;
}
.indigo {
  background-color: indigo;
  flex-grow: 2;
}
.violet {
  background-color: violet;
}
.black {
  background-color: black;
}
.white {
  background-color: pink;
}
＆＃13;
<div class="container">
  <div class="row flex height">
    <div class="col-md-6 red row"></div>
    <div class="col-md-6 orange row flex flex-columns">
      <div class="row black flex">
        <div class="col-md-3 yellow row"></div>
        <div class="col-md-9 green row"></div>
      </div>
      <div class="row white flex">
        <div class="col-md-6 blue row"></div>
        <div class="col-md-6 indigo row"></div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您的.flex-column不应该设置flex-direction：

.flex-columns {  
  box-sizing: border-box;
  display: flex;
  /* flex-direction: column; */
  align-content: stretch;
}

将以下内容添加到您的css中：

.flex-columns > .row{
  flex: 1 0 auto;
  margin: 0; /* this is to reset the column padding/margins added by bootstrap */
}

分叉笔 - http://codepen.io/braican/pen/PqWqvr

＆＃13;

＆＃13;

@import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
.flex {
  min-height: 500px;
  box-sizing: border-box;
  display: flex;
}

.flex-columns {  
  box-sizing: border-box;
  display: flex;
  /* flex-direction: column; */
  align-content: stretch;
}
.flex-columns > .row{
  flex: 1 0 auto;
  margin: 0;
}


.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: blue;
}

.blue {
  background-color: orange;
}

.indigo {
  background-color: indigo;
}

.violet {
  background-color: violet;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}

＆＃13;

<div class="container">
  <div class="row flex">
    <div class="col-md-6 red">
    </div>
    <div class="col-md-6 orange">

      <div class="flex flex-columns">
        <div class="row black">
        </div>

        <div class="row white">
        </div>
      </div>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;