Ich habe ein einzelnes div mit dem Namen .wrap , innerhalb dessen Elemente platziert werden. Eine unbekannte Anzahl von Objekten ( .thing ) sollte in vier Spalten angeordnet werden (übereinander gestapelt).
Die Spalten müssen gleichmäßig verteilt sein, so dass keine Spalte leer ist. Dies wäre sehr einfach mit:
%Vor% Allerdings funktioniert column-fill 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 abgesehen von der gleichmäßigen Verteilung das gewünschte Layout hat → Ссылка
Ja, Sie können hier Flexbox verwenden - und das sollte die meiste Arbeit erledigen. Es ist eine Art Hacky, und Sie haben keine CSS-Spaltenregeln verwendet. 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 richten Sie den Wrapper-Container als Flex-Container mit der Regel display: flex ein und erstellen mehrere Spalten mit flex-direction: column und flex-wrap: wrap oder der Kurzschrift flex-flow: column wrap .
Um sicherzustellen, dass jede Spalte eine x Anzahl von Elementen enthält, müssen Sie die flex-basis -Regel verwenden und auf den Prozentsatz der Spalte setzen, die Sie auffü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 wünschen. Daher müssen Sie den nth-child oder nth-of-type Selektor verwenden, um ab dem 10. Element eine neue Flex-Basis von 50% 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 das
Das Zentrieren des Textes in einer Flexbox bleibt jedoch ein Problem und Sie müssen die Dinge als Flex-Container einrichten, indem Sie display auf flex oder inline-flex auf einen flex-direction von column setzen mit text-align und justify-content Eigenschaften, die auf center gesetzt sind.
Dieses CSS sollte Ihre Probleme lösen.
%Vor%Tags und Links html css multiple-columns