Вложенные flexbox игнорирует элементы flexbasis и stacks

Question

Я хочу построить макет с тремя столбцами. Два из этих столбцов будут содержать две строки. Каждый листовой элемент будет содержать div, который я использую для отображения фонового изображения.

Главный div должен сохранять свое соотношение, потому что у него есть padding-bottom: атрибут xx%.

Почему flexbox складывает элементы строки? И почему он игнорирует flex-основу в атрибуте flex?

HTML:

<div class="vodReco_hub"> 
    <div id="col_left"> 
    <div id="vertical_large" > 
     <div id="image_box" 
      style="background-image:url('http://lorempixel.com/400/400/')"></div> 
    </div> 
    </div> 
    <div id="col_mid"> 
    <div id="horizontal_medium_top"> 
     <div id="image_box" 
      style="background-image:url('http://lorempixel.com/400/400/')"></div> 
    </div> 
    <div id="horizontal_medium_bottom"> 
     <div id="image_box" 
      style="background-image:url('http://lorempixel.com/400/400/')"></div> 
    </div> 
    </div> 
    <div id="col_right"> 
    <div id="horizontal_small_top"> 
     <div id="image_box" 
      style="background-image:url('http://lorempixel.com/400/400/')"></div> 
    </div> 
    <div id="horizontal_small_bottom"> 
     <div id="image_box" 
      style="background-image:url('http://lorempixel.com/400/400/')"></div> 
    </div> 
    </div> 
</div> 

CSS:

.vodReco_hub 
{ 
    position: relative; 
    width: 100%; 
    padding-bottom: 50%; 

    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 

    background-color: blue; 
} 
.vodReco_hub #image_box 
{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 

    background-size: cover; 
    background-position: center; 


    background-color: yellow; 
} 
.vodReco_hub #col_left 
{ 
    flex-basis: 38%; 


    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
} 
.vodReco_hub #col_mid 
{ 
    flex-basis: 38%; 


    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
} 
.vodReco_hub #col_right 
{ 
    flex-basis: 24%; 

    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
} 

codepen: http://codepen.io/anon/pen/xbJNNQ

Answer 1

Ты идентификаторы были преобразованы в классы.

<div class="col_left"> 
    <div class="vertical_large" > 

Этот codepen иллюстрирует некоторые исправления, необходимые для приближения того, что я считаю, что вы говорите.

Не быть грубым, но если вы не уверены, когда использовать класс или идентификатор, вы должны начать с html/css. Затем займитесь flexbox.

Добавление прокладки к нижней части flexbox не имеет ничего общего с сохранением пропорций.

Flexbox не складывал строки.

Вопрос о гибкой основе был отличным. Это довольно сложно. Таким образом, вы создавали 100% из 0 элементов размера. К сожалению, html не имеет какого-то волшебного способа понять, что фон должен быть включен в размер родителя. 100% - это отношение «я» к родительскому. Если я показываю фон на 100% от размера моего родителя ... он не помогает, если мой родитель имеет размер 0.