一個Flexbox的

Question

內施膠一個Flexbox的我有，我想將兩個flexboxes在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％。我有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項目（子項）也可以是flex容器。

當嘗試使用柔性版製作網格時，您還應該使用柔性基礎和柔性增長而不是寬度。我使用了速記flex屬性。使用flex速記屬性總是一個好主意，因爲它迫使你設置flex-grow，shrink和basis value。某些瀏覽器（IE）沒有正確的默認值，這樣可以爲您節省一些麻煩。

此外，this是去文章開始使用Flexbox。