Flexbox
Ein dynamisches Mauerwerkslayout ist mit flexbox nicht möglich, zumindest nicht sauber und effizient.
Flexbox ist ein eindimensionales Layoutsystem. Dies bedeutet, dass Elemente entlang horizontaler oder vertikaler Linien ausgerichtet werden können. Ein Flex-Element ist auf seine Zeile oder Spalte beschränkt.
Ein echtes Rastersystem ist zweidimensional, dh es kann Elemente entlang horizontaler UND vertikaler Linien ausrichten. Inhaltselemente können sich gleichzeitig über Zeilen und Spalten erstrecken, was Flex-Elemente nicht können.
Aus diesem Grund verfügt die Flexbox nur über eine begrenzte Kapazität zum Aufbau von Gittern. Dies ist auch ein Grund, warum das W3C eine andere CSS3-Technologie entwickelt hat, Grid Layout .
row wrap
In einem Flex-Container mit flex-flow: row wrapmüssen Flex-Elemente in neue Zeilen umbrochen werden .
Dies bedeutet, dass ein Flex-Element nicht unter ein anderes Element in derselben Zeile gewickelt werden kann .
Beachten Sie oben, wie Div # 3 unter Div # 1 umschließt und eine neue Zeile erstellt. Es kann nicht unter div # 2 gewickelt werden .
Wenn die Elemente nicht die höchsten in der Reihe sind, bleibt der Leerraum erhalten, wodurch unschöne Lücken entstehen.
column wrap
Wenn Sie zu wechseln, flex-flow: column wrapist ein gitterartiges Layout besser erreichbar. Ein Container in Säulenrichtung weist jedoch auf Anhieb vier potenzielle Probleme auf:
- Flex-Elemente fließen vertikal und nicht horizontal (wie in diesem Fall erforderlich).
- Der Container wird horizontal und nicht vertikal erweitert (wie das Pinterest-Layout).
- Der Behälter muss eine feste Höhe haben, damit die Gegenstände wissen, wo sie verpackt werden müssen.
- Zum jetzigen Zeitpunkt weist es einen Mangel in allen gängigen Browsern auf, in denen der Container nicht erweitert werden kann, um zusätzliche Spalten aufzunehmen .
Infolgedessen ist ein Container in Spaltenrichtung in diesem Fall und in vielen anderen Fällen keine Option.
CSS-Raster mit undefinierten Artikelabmessungen
Das Rasterlayout wäre eine perfekte Lösung für Ihr Problem, wenn die verschiedenen Höhen der Inhaltselemente im Voraus festgelegt werden könnten . Alle anderen Anforderungen liegen innerhalb der Kapazität von Grid.
Die Breite und Höhe von Rasterelementen muss bekannt sein, um Lücken mit umgebenden Elementen zu schließen.
Daher ist Grid, das beste CSS-Angebot für den Bau eines horizontal fließenden Mauerwerks, in diesem Fall nicht ausreichend.
Bis eine CSS-Technologie mit der Fähigkeit zum automatischen Schließen der Lücken eintrifft, hat CSS im Allgemeinen keine Lösung. So etwas würde wahrscheinlich ein erneutes Fließen des Dokuments erfordern, daher bin ich mir nicht sicher, wie nützlich oder effizient es sein würde.
Du brauchst ein Skript.
JavaScript-Lösungen verwenden in der Regel die absolute Positionierung, bei der Inhaltselemente aus dem Dokumentfluss entfernt werden, um sie ohne Lücken neu anzuordnen. Hier sind zwei Beispiele:
CSS-Raster mit definierten Artikelabmessungen
Für Layouts, bei denen die Breite und Höhe von Inhaltselementen bekannt sind, finden Sie hier ein horizontal fließendes Mauerwerkslayout in reinem CSS:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
Wie es funktioniert
- Richten Sie einen Rastercontainer auf Blockebene ein. (
inline-gridwäre die andere Option)
- Die
grid-auto-rowsEigenschaft legt die Höhe automatisch generierter Zeilen fest. In diesem Raster ist jede Reihe 50 Pixel groß.
- Das
grid-gapAnwesen ist eine Abkürzung für grid-column-gapund grid-row-gap. Diese Regel legt eine 10-Pixel-Lücke zwischen Rasterelementen fest . (Dies gilt nicht für den Bereich zwischen Elementen und dem Container.)
Die grid-template-columnsEigenschaft legt die Breite explizit definierter Spalten fest.
Die repeatNotation definiert ein Muster sich wiederholender Spalten (oder Zeilen).
Die auto-fillFunktion weist das Raster an, so viele Spalten (oder Zeilen) wie möglich auszurichten, ohne den Container zu überlaufen. (Dies kann zu einem ähnlichen Verhalten wie bei Flex-Layouts führen flex-wrap: wrap.)
Die minmax()Funktion legt einen minimalen und maximalen Größenbereich für jede Spalte (oder Zeile) fest. Im obigen Code beträgt die Breite jeder Spalte mindestens 30% des Containers und höchstens den verfügbaren freien Speicherplatz.
Die frEinheit repräsentiert einen Bruchteil des freien Speicherplatzes im Gittercontainer. Es ist vergleichbar mit der flex-growEigenschaft von Flexbox .
Mit grid-rowund spansagen wir den Rasterelementen, über wie viele Zeilen sie sich erstrecken sollen.
Browser-Unterstützung für CSS Grid
- Chrome - volle Unterstützung ab 8. März 2017 (Version 57)
- Firefox - volle Unterstützung ab 6. März 2017 (Version 52)
- Safari - volle Unterstützung ab 26. März 2017 (Version 10.1)
- Edge - volle Unterstützung ab 16. Oktober 2017 (Version 16)
- IE11 - keine Unterstützung für aktuelle Spezifikation; unterstützt veraltete Version
Hier ist das vollständige Bild: http://caniuse.com/#search=grid
Coole Grid-Overlay-Funktion in Firefox
Wenn Sie in Firefox-Entwicklungstools den Rastercontainer überprüfen, befindet sich in der CSS-Deklaration ein winziges Rastersymbol. Beim Klicken wird auf der Seite ein Umriss Ihres Rasters angezeigt.
Weitere Details finden Sie hier: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
