Есть ли отзывчивый вертикальный дисплей: flex? (нет таблиц/нет JS)

Question

Предположим, у нас есть две обертки div. Обратите внимание, что каждая обертка может меняться по ширине и/или по высоте. Внутри этой обертки есть несколько div. Сумма div может меняться от 1 до ~.

Я хотел бы иметь горизонтальный и вертикальный вид. Чтобы получить ровное горизонтальное распределение, используется свойство css display: flex;.

Я хотел бы добиться такого же эффекта по вертикали. display: table; очень похож на то, чего я хочу достичь. Однако с таблицами мы не сможем вообще изменить высоту.

+-----+-----+-----+   +-----------------+ 
    |  |  |  |   |     | 
    |  |  |  |   +-----------------+ 
    |  |  |  |   |     | 
    |  |  |  |   +-----------------+ 
    |  |  |  |   |     | 
    +-----+-----+-----+   +-----------------+ 
     display: flex;     ??????: ????; 

Рассмотрите this pen в качестве шаблона.

Answer 1

Используйте flex-direction, чтобы изменить способ отображения гибких боксов.
Значения это может принять: row | row-reverse | column | column-reverse. Значение по умолчанию - строка.

.flexible { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="flexible"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

Заканчивать this guide, чтобы помочь вам с Flexbox.

Answer 2

С недвижимостью flex-direction: column, вы можете изменить направление выравнивания.

Я бы порекомендовал этот сайт: http://flexbox.help/. Он описывает и позволяет проверить все свойства для flexboxes.

Answer 3

Вам использование flex-wrap ..

.wrapper-h { 
    height: 100px; 
    width: 100px; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-items: stretch; 
} 

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