在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％，另一個占據col_right的75％。 我有int_row我認為應該包含inside_left和inside_right，但是不知道那是多余的。 即使將int_row設置為100％，寬度實際上也不會延伸到col_right的整個寬度。

上圖中的藍色是int_row，綠色是inside_right。 請注意，藍色並不接近寬度的100％。 我基本上不希望圖像和綠色重疊。 我在想如果寬度擴大更多，重疊將不會發生。

關於如何實現此目標或者是否正在考慮正確的任何建議？

Answer 1

我在CodePen上為您制作了一個有效的示例 。

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元素。 因為彈性項目（子項）也可以是彈性容器。

嘗試使用flexbox創建網格時，還應該使用flex-basis和flex-grow而不是width。 我使用了簡寫的flex屬性。 使用flex速記屬性始終是一個好主意，因為它會強制您設置flex-grow，shrink和base值。 某些瀏覽器（IE）沒有正確的默認值，因此可以為您省去一些麻煩。

另外， 這是Flexbox入門文章。