Flexbox равная высота пробел проблема

Question

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

Как вы можете видеть из моего кода, красный фон в .card-thumb неправильной высоты. Итак, как это исправить?

Вот моя ручка: http://codepen.io/woosaj/pen/bZjyRP

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    flex-flow: row wrap; 
    background: rgba(2552,255,255,.1) 
} 

.column { 
    display: flex; 
    flex: 0 0 33.33333%; 
    padding-left: 0.3125rem; 
    padding-right: 0.3125rem; 
    max-width: 33.33333%; 

} 

.card { 
    background: #fff; 
    display: flex; 
    flex-flow: row wrap; 
    .card-thumb { 
     width: 100%; 
     background: red; 
    } 

} 

img { 
    max-width: 100%; 
    display: block; 
} 

Answer 1

Начальная установка гибкого контейнера - align-content: stretch.

Это означает, что несколько линий в гибком контейнере будут расширяться, чтобы заполнить размер контейнера.

Потому что ваш контейнер flex-direction: row и вы включили flex-wrap: wrap, то align-content свойства распределяет обернутые элементы по вертикали (по cross-axis).

С по умолчанию stretch разделитель с красным фоном расширяется относительно своих братьев и сестер, чтобы заполнить высоту контейнера. (Если вы добавите цвет фона во все элементы гибкости, вы заметите, что вместе они заполняют контейнер.)

Вместо этого используйте align-content: flex-start или space-between.

---

Следующая проблема вы будете сталкиваться не в том, что .bottom больше не уважает align-self: flex-end.

Для решения этой проблемы я бы рекомендовал переключить контейнер flex-direction на column и применить margin-top: auto к .bottom. Подробнее:

• Why isn't align-self aligning my div to the bottom of my flexbox?
• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
• Align an element to bottom with flexbox

Answer 2

В стиле .card изменить display:flex; к flex:1;. Это поможет вам.

body { 
    background: #000; 
} 

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    flex-flow: row wrap; 
    background: rgba(2552,255,255,.1) 
} 

.column { 
    display: flex; 
    flex: 0 0 33.33333%; 
    padding-left: 0.3125rem; 
    padding-right: 0.3125rem; 
    max-width: 33.33333%; 

} 

.card { 
    background: #fff; 
    flex:1; 
    flex-flow: row wrap; 
    .card-thumb { 
     width: 100%; 
     background: red; 
    } 

} 

img { 
    max-width: 100%; 
    display: block; 
}