是否有響應式垂直顯示：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/。它描述並允許測試柔性盒的所有屬性。

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