Css Flexbox嵌套列

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

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

下面是一张图表，说明我正在努力实现的目标：

这是我的密码笔：

希望你能理解我想做什么，但我不能让它正常工作。

---

有人能帮忙吗？

如果我理解得很好，你愿意吗

.flex columns{
显示器：flex；
弯曲方向：行；
}
.行{
弹性：1；
}

@import'//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'；
.flex{
最小高度：500px；
框大小：边框框；
显示器：flex；
}
.flex列{
框大小：边框框；
显示器：flex；
对齐内容：拉伸；
}
.行{
弹性：1；
边距：0；/*删除愚蠢的引导边距*/
}
.red{背景色：红色；}
.orange{背景色：橙色；}
.yellow{背景色：黄色；}
.green{背景色：蓝色；}
.blue{背景色：橙色；}
.indigo{背景色：靛蓝；}
.violet{背景色：紫色；}
.black{背景色：黑色；}
.white{背景色：白色；}

---

您的

.flex列

不应设置

弯曲方向

：

.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 */
}

叉形笔

@import'//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'；
.flex{
最小高度：500px；
框大小：边框框；
显示器：flex；
}
.flex列{
框大小：边框框；
显示器：flex；
/*弯曲方向：立柱*/
对齐内容：拉伸；
}
.flex columns>.row{
弹性：10自动；
保证金：0；
}
瑞德先生{
背景色：红色；
}
.橙色{
背景颜色：橙色；
}
黄先生{
背景颜色：黄色；
}
格林先生{
背景颜色：蓝色；
}
蓝先生{
背景颜色：橙色；
}
靛蓝{
背景色：靛蓝；
}
维奥莱特先生{
背景色：紫罗兰色；
}
布莱克先生{
背景色：黑色；
}
怀特先生{
背景色：白色；
}

---

我修改了您的HTML和CSS，使结果符合图像（尽管有颜色）

在每个div中添加了一个

填充

将

flex-grow

添加到一些flex项中，使它们填充它们的父项（通过向它们添加

行

类）

已删除

div.flex.flex列

，并将其

类

es更改为其父级，因此它将更改为

div.col-md-6.orange.flex.flex列

。这太棒了，弄乱了你的布局

修改紫色

div的
flex-growth
（在图中）以更改它们的比率

您可以运行以下代码段以查看结果。 内部的

div

s仍然需要一些填充来真正模仿图像，但我猜这不是你问题的重点

.container{
边框：1px纯红；
}
div{
填充：10px；
}
.身高{
最小高度：500px；
}
.flex{
框大小：边框框；
显示器：flex；
}
.柔性柱{
显示器：flex；
弯曲方向：立柱；
}
.行{
弹性：1；
}
瑞德先生{
背景色：红色；
}
.橙色{
背景颜色：橙色；
}
黄先生{
背景颜色：黄色；
柔性生长：2；
}
格林先生{
背景颜色：绿色；
柔性生长：3；
}
蓝先生{
背景颜色：蓝色；
柔性生长：3；
}
靛蓝{
背景色：靛蓝；
柔性生长：2；
}
维奥莱特先生{
背景色：紫罗兰色；
}
布莱克先生{
背景色：黑色；
}
怀特先生{
背景颜色：粉红色；
}

。绿色{背景：蓝色}。蓝色{背景：橙色}

。这是故意的吗？不完全是，我想让弹性列的行为像行一样，即.black和.voilet应该100%宽度和相等高度并排放置。@r3plia您说：“我试图让弹性列中的‘行’显示为列”。现在你说他们应该表现得像排？是的，看起来我对我想要的东西感到困惑！很抱歉。我已经更新了我的question@r3plica但我认为您的原始代码现在的行为与您所希望的一样。我不明白，你的密码笔好像变了。那么，试试

.flex columns{flex direction:column}

。行{flex:1；}做什么？这似乎让我的争吵达到了我的预期。

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