在flexbox中调整flexbox的大小

Question

我有flexbox，我想再放两个flexbox。

.Summary_Row{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-flow: row;
    flex-flow: row;
    width: 100%;
    margin-top: 10px;
    border-bottom: 2px solid #d3d3d3;
    }

.col_left{ order:1; width: 33%; display:flex; justify-content: center; text-align: center;}
.col_center{order:2; width: 33%; display:flex; justify-content: center;  border-right: 2px solid #d3d3d3; border-left: 2px solid #d3d3d3; text-align: center;}
.col_right{ order:3; width: 33%; display:flex; justify-content: center; text-align: center;}


    .int_row{
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-flex-flow: row;
     flex-flow: row;
     width: 100%;
    }


#inside_left{order:1; display:flex; justify-content: center; align-items: center; width: 25%;}
#inside_right{order:2;  display:flex; flex-flow: column; justify-content: center; width: 75%; text-align:left;}

在上面的CSS中，我有一个flexbox（summary_row），它被分成三个相等的列。对于col_right，我想进一步将它分成另外两个盒子，一个占25％，另一个占75％col_right。我有int_row，我认为应该包含inside_left和inside_right，但不知道这是多余的。即使我将int_row设置为100％，宽度实际上也不会延伸到col_right的整个宽度。

上图中的蓝色是int_row，绿色是inside_right。请注意，蓝色不接近宽度的100％。我基本上不希望图像和绿色重叠。我在想宽度是否更大，不会发生重叠。

有关如何实现这一目标的任何建议，或者我是否正确地考虑过这个问题？

Answer 1

我已在CodePen上为您制作了a working example。

<强> HTML ：

<div class="row">
  <div class="row__left">.row__left</div>
  <div class="row__center">.row__center</div>
  <div class="row__right">
    <div class="row__right-a">.row__right-a</div>
    <div class="row__right-b">.row__right-b</div>
  </div>
</div>

<强> CSS ：

.row {
  display: flex;
  border: 1px solid #000;
  padding: .5em;
}

.row__left,
.row__center,
.row__right {
  flex: 0 0 33.3333333%;
  border:1px solid red;
  padding: .5em;
  box-sizing: border-box;
}

.row__right {
  display: flex;
}

.row__right-a {
  flex: 0 0 25%;
  background-color: blue;
}
.row__right-b {
  flex: 0 0 75%;
  background-color: green;
}

您不需要额外的.int_row元素。因为flex项（child）也可以是flex容器。

在尝试使用flexbox制作网格时，您还应该使用flex-basis和flex-grow而不是width。我使用了速记flex属性。使用flex速记属性总是一个好主意，因为它会强制你设置flex-grow，shrink和basis值。某些浏览器（IE）没有正确的默认值，这样可以省去一些麻烦。

此外，this是开始使用Flexbox的文章。