Elemente gleichmäßig in Spalten verteilen

Question

Ich habe ein einzelnes div namens .wrap, in dem Elemente platziert werden. Eine unbekannte Menge an Gegenständen (.thing) sollte in vier übereinander gestapelten Säulen angeordnet werden.

<div class="wrap"> 
    <div class="thing"> thing1 </div> 
    <div class="thing"> thing2 </div> 
    ... 
</div> 

Die Spalten müssen gleichmäßig verteilt sein, so dass keine Spalte leer ist. Dies wäre sehr einfach mit:

.wrap { 
    column-count: 4; 
    column-fill: balance; 
} 

jedoch column-fill funktioniert nur in Firefox, glaube ich.

Gibt es eine andere CSS-Methode, um dieses Layout in allen neueren Versionen von Browsern zu erreichen? Konnte flexbox hier konkret helfen?

Bitte beachten Sie, dass ich keine zusätzlichen divs hinzufügen kann, um als Spalten zu fungieren und keine JS-Lösung.

Hier ist eine Geige, die das gewünschte Layout mit Ausnahme der gleichmäßigen Verteilung hat → http://jsfiddle.net/bpdtkmmt/

Answer 1

Ja, können Sie Flexbox Hier und es verwenden, sollte die Arbeit zum größten Teil getan. Es ist eine Art Hacky und Sie haben keine CSS-Spaltenregeln mehr. Es gibt etwas weniger Variabilität. Wenn Sie also weitere Zeilen/Spalten hinzufügen, müssen Sie die Werte ändern. Um die Anzahl der Spalten pro Zeile beizubehalten, müssen Sie eine feste oder prozentuale Höhe für den Wrapper festlegen. Von dort aus stellen Sie den Wrapper-Container als Flex-Container mit der display: flex-Regel her und richten mehrere Spalten unter Verwendung von flex-direction: column und flex-wrap: wrap oder der Kurzschrift flex-flow: column wrap ein.

Um sicherzustellen, dass jede Spalte x Anzahl der Elemente enthält, müssen Sie die flex-basis Regel verwenden und auf den Prozentsatz der Spalte einstellen, die Sie füllen möchten. Eine Spalte mit 3 Elementen hätte also flex-basis: 33.33%. Sie haben angegeben, dass Sie mehrere Zeilen mit drei Elementen und dann zwei Zeilen mit zwei Elementen möchten. Sie müssen also den nth-child oder nth-of-type Selektor verwenden, um eine neue Flex-Basis von 50% beginnend beim 10. Element zu erstellen. Und natürlich müssen Sie einen Prozentsatz für die Breite festlegen, die das Ding-Element auf der Seite aufnehmen soll (4 Zeilen = 25%). Um sicherzustellen, dass alle Elemente gleich groß sind, müssen Sie die

jedoch verwenden, die den Text in einem Flexbox Zentrierung ein Problem bleibt, und Sie werden die Dinge, wie Flex-Container etablieren müssen durch display-flex oder inline-flex mit einer Einstellung flex-direction von column, zusammen mit text-align und justify-content Eigenschaften auf center festgelegt.

justify-content: center; 
flex-direction: column; 
text-align: center 

http://jsfiddle.net/hxcnoxx9/10/

Diese CSS sollten Sie Ihre Probleme lösen.

.wrap { 
    height: 180px; 
    background: linear-gradient(to right, tomato 0%, tomato 25%, slategrey 25%, slategrey 50%, tomato 50%, tomato 75%, slategrey 75%); 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

.thing { 
    background: rgba(255, 255, 255, .2); 
    color: #fff; 
    width: 25%; 
    flex-basis: 33.33%; 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); 
    display: inline-flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
} 

.thing:nth-child(1n+10) { 
    flex-basis: 50%; 
}