Gibt es eine reaktionsschnelle vertikale Anzeige: flex? (keine Tabellen/keine JS)

Question

Nehmen wir an, wir haben zwei div Wrapper. Beachten Sie, dass sich jeder Wrapper in Breite und/oder Höhe ändern kann. Es gibt mehrere div 's in diesem Wrapper. Die Menge von div kann sich von 1 bis ~ ändern.

Ich möchte sowohl eine horizontale als auch eine vertikale Ansicht haben. Um eine gleichmäßige horizontale Verteilung zu erhalten, wird die css-Eigenschaft display: flex; verwendet.

Ich möchte den gleichen Effekt vertikal erreichen. display: table; ähnelt sehr genau, was ich erreichen möchte. Bei Tabellen können wir die Höhe jedoch nicht ändern.

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

Betrachten Sie this pen als eine Vorlage.

Answer 1

Verwenden Sie flex-direction, um die Anzeige der Flexboxen zu ändern.
Werte, die es annehmen kann: row | row-reverse | column | column-reverse. Standard ist Zeile.

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

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

prüfen this guide out Sie mit Flexbox zu helfen.

Answer 2

Mit der Eigenschaft flex-direction: column können Sie die Richtung der Ausrichtung ändern.

Ich würde diese Website empfehlen: http://flexbox.help/. Es beschreibt und ermöglicht, alle Eigenschaften für die Flexboxen zu testen.

Answer 3

Sie eine Verwendung 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