проклейки в Flexbox в Flexbox

Question

У меня есть Flexbox, что я хочу, чтобы разместить еще два flexboxes в.

.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

Я сделал a working example для вас на 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. Поскольку элемент гибкости (дочерний элемент) также может быть гибким контейнером.

Вы также должны использовать flex-basis и flex-grow вместо ширины при попытке создать сетки с помощью flexbox. Я использовал свойство shorthand flex. Всегда полезно использовать свойство flex shorthand, поскольку оно заставляет вас устанавливать гибкость, сокращение и базовую ценность. Некоторые браузеры (IE) не имеют правильных значений по умолчанию, так что это избавит вас от некоторых проблем.

Также, this является статья, чтобы начать работу с Flexbox.