一个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。