Item Flow, Teil 1: Eine neue Art, die Web-Struktur in CSS festzulegen

Hintergrund

Im Lauf der Zeit wurden Flexbox- und Grid-Layouts allein mit CSS möglich, doch für Masonry-Layouts musste man bis heute noch auf die Hilfe von JavaScript zurückgreifen. Wegen dieses Layouts gab es zwischen den Browsern verschiedene Diskussionen. Chrome hat ein neues Layout implementiert (display: masonry), Firefox und Safari haben es über die Methode mit grid-template-*: collapse umgesetzt.

Dann brachte jedoch jemand einen ganz anderen bestehenden Ansatz ins Spiel. Die Idee war, Masonry-, Grid- und Flexbox-Layouts in einem einzigen Konzept zu vereinheitlichen.

Den Fluss von Flexbox und Grid zusammenführen

Bisher war die Art, den Fluss interner Elemente festzulegen, je nach Layout unterschiedlich.

.container {  
    /* Flexbox */  
    flex-direction: row | row-reverse | column | column-reverse;  
    flex-wrap: nowrap | wrap | wrap-reverse;  
    /* flex-direction + flex-wrap */  
    flex-flow: <flex-direction> <flex-wrap>;  
  
    /* Grid */  
    grid-auto-flow: row | column | dense;  
}  

Diese Funktionen sollen künftig in die folgenden Eigenschaften zusammengeführt werden.

• item-direction
• item-wrap
• item-pack
• item-slack

item-direction

Definiert die Richtung, in die interne Elemente fließen. Ersetzt die Properties flex-direction und grid-auto-flow.

.container {  
    item-direction: row | row-reverse | column | column-reverse;  
}  

item-wrap

Definiert Verhalten und Richtung, wenn beim Anordnen interner Elemente eine Zeile überläuft. Ersetzt die Property flex-wrap.

.container {  
    item-wrap: auto || [[nowrap | wrap] | [normal | reverse]];  
}  

Beim Grid-Layout ist standardmäßig wrap aktiv. Setzt man jedoch item-wrap: nowrap, werden alle Elemente nur in einer einzigen Zeile angeordnet, wodurch sich auch ein Layout mit identischer Breite erzeugen lässt.

item-pack

Definiert, wie interne Elemente gepackt werden. Ersetzt die Property grid-auto-flow: dense.

.container {  
    item-pack: normal | dense;  
}  

Für Flexbox gab es das bisher nicht, doch mit item-pack: dense wird ein Packverhalten wie bei Grid möglich. Beispielsweise wechselte eine Flexbox mit aktiviertem wrap beim Stapeln von Elementen bisher immer in die nächste Zeile, wenn der verbleibende Platz in einer Zeile kleiner als die Breite des Elements war. Künftig ließe sich das so umsetzen, dass zuerst geprüft wird, ob in einer vorherigen Zeile noch Platz für dieses Element vorhanden ist, und es dann dort eingefügt wird.

Außerdem lassen sich auch neue Verfahren ergänzen, die es bisher nicht gab.

• item-pack: balance: ähnlich wie text-wrap: balance lässt sich die Anzahl der Elemente pro Zeile an die anderer Zeilen angleichen.
• item-pack: collapse: Damit lässt sich das eigentliche Ziel, ein Masonry-Layout, einfach umsetzen.

item-slack

Diese Property legt fest, wie viel freier Platz beim Packen interner Elemente pro Zeile mindestens verbleiben soll. Sie ersetzt die zuvor vorgeschlagenen Properties grid-slack und masonry-slack. Über den Namen item-slack wird noch diskutiert. (Anmerkung des Übersetzers: Der Name wurde inzwischen als flow-tolerance festgelegt.)

Alles zusammen

Um jetzt eine Flexbox zu erstellen, die Elemente nach unten anordnet, kann man sie so festlegen.

.container {  
    display: flex;  
    item-direction: column;  
    item-wrap: nowrap;  
}  

Eine kürzere Schreibweise ist ebenfalls geplant.

.container {  
    display: flex;  
    item-flow: column nowrap;  
}  

Über den Namen dieser Property und ihre genaue Funktionsweise wird noch diskutiert.

---

Inzwischen wurde das Masonry-Layout zu display: grid-lanes geändert. Die Diskussion über die item-*-Properties verläuft jedoch weiterhin positiv.

• Unifying grid-auto-flow and flex-flow(Diskussion zu item-flow)
• Decide on a name for item-slack(flow-tolerance nun festgelegt)
• Brick by brick: Help us build CSS Masonry
• CSS Grid Lanes

Persönlich würde ich es begrüßen, wenn sich bei einer Vereinheitlichung auch display: flex oder grid weglassen ließe.