CSS Grid und CSS Flexbox sind komplementäre Weblayout-Technologien, die seit Jahren mit Spannung erwartet werden. Trotz einiger oberflächlicher Ähnlichkeiten werden sie jedoch tatsächlich für sehr unterschiedliche Aufgaben eingesetzt. Sie lösen jeweils eine ganz unterschiedliche Reihe von Problemen.
Im Idealfall stellen Sie möglicherweise fest, dass Sie beide für unterschiedliche Layoutaufgaben einsetzen. In diesem Beitrag gehen wir auf ihre Unterschiede ein, untersuchen, wie sie verschiedene Layoutprobleme lösen, und helfen Ihnen bei der Auswahl der richtigen Lösung (falls vorhanden) für Ihr Problem.
Grid ist Container-basiert, Flexbox ist Content-basiert
Im Flexbox-Layout wird die Größe einer Zelle (Flex-Item) innerhalb des Flex-Items selbst definiert, und im Grid-Layout wird die Größe einer Zelle (Grid-Item) innerhalb des Grid-Containers definiert.
Verwirrend?
Schauen wir uns ein Beispiel an. Hier ist der HTML-Code zum Erstellen einer Reihe von Elementen:
Und wir gestalten dies mit Flexbox wie folgt:
.row { margin: 20px auto; maximale Breite: 300 Pixel; Anzeige: Flex; } .row > div { border: 1px gestricheltes Grau; Flex: 1 1 Auto; /* Größe der innerhalb von Elementen definierten Elemente */ text-align: center; Polsterung: 12px; }
Wir haben die Größe der Zellen innerhalb des Flex-Items durch Einstellung definiert Flex: 1 1 Auto;. Die Flex-Eigenschaft ist eine Abkürzung zum Festlegen von Flex-Grow-, Flex-Shrink- und Flex-Basis-Eigenschaften in einer Anweisung. Sein Standardwert ist 0 1 autom. Beachten Sie, dass das „row“-Div der Flex-Container ist und wir dort nicht die Größe der Elemente festlegen. Wir legen die Größe innerhalb des Flex-Items fest.
Bei der Vorschau in einem Browser erhalten wir erwartungsgemäß eine Reihe von Kästchen:
Sehen wir uns nun an, wie wir mithilfe von Grid dieselbe Ausgabe generieren können:
.row { margin: 20px auto; maximale Breite: 300 Pixel; Anzeige: Raster; Rastervorlagenspalten: 1fr 1fr 1fr 1fr; /* Größe der im Container definierten Elemente */ } .row div { border: 1px gestrichelt grau; Textausrichtung: Mitte; Polsterung: 12px; }
Der obige Code liefert genau die gleiche Ausgabe.
Beachten Sie, dass wir jetzt die Größe der Zelle mithilfe von Grid-Template-Columns im Grid-Container (.row) definieren, nicht mithilfe des Grid-Items.
Das ist ein wichtiger Unterschied. Es zeigt, dass das Flexbox-Layout berechnet wurde nach Sein Inhalt wird geladen, während das Rasterlayout unabhängig vom darin enthaltenen Inhalt berechnet wird.
Grid hat eine „Gap“-Eigenschaft, Flexbox nicht
Sie können argumentieren, dass ein wesentlicher Unterschied zwischen Flexbox und Grid darin besteht, dass wir bei letzterem Dachrinnen dazwischen erstellen können Rasterelemente verwenden Gitter-Spalten-Lücke, etwa so:
Um das gleiche Ergebnis in Flexbox zu erzielen, müssten wir Polsterung und verschachtelte Container verwenden oder die Breite des Flex-Containers erhöhen und die verwenden Rechtfertigungsinhalt Eigenschaft, die zu verbreiten Flex-Artikel.
Bei der Flexbox müssen wir einen Umweg nehmen, weil sie keinen hat Lücke Eigentum. Es ist jedoch auf dem Weg; Die CSS-Box-Ausrichtungsmodul 3 enthält CSS-Funktionen zur Ausrichtung von Boxen in allen Layoutmodi: Blocklayout, Tabellenlayout, Flex-Layout und Rasterlayout. Das Box Alignment-Modul sammelt Eigenschaften von Flexbox, Raster und Mehrspalten, die in allen Layoutmodellen konsistent verwendet werden können. Irgendwann werden wir in der Lage sein, Lücken hinzuzufügen Reihenlücke Und Spaltenlücke Eigenschaften, aber noch nicht.
Flexbox ist eindimensional, Grid ist zweidimensional
Seit wir Tabellen für das Layout verwenden, ordnen wir Elemente im Web als Zeilen und Spalten an. Sowohl Flexbox als auch Grid basieren auf diesem Konzept. Flexbox eignet sich am besten zum Anordnen von Elementen in einer einzelnen Zeile oder einer einzelnen Spalte. Raster eignet sich am besten zum Anordnen von Elementen in mehreren Zeilen und Spalten.
Mit anderen Worten: Flexbox ist eindimensional und Grid ist zweidimensional. Schauen wir uns ein häufig verwendetes eindimensionales Layout an – die Social-Share-Buttons:
Alle Elemente befinden sich in einer einzigen Zeile. Wir können dies mit Flexbox wie folgt implementieren:
.social-icons { display: flex; Listenstil: keiner; justify-content: space-around; }
Die Eigenschaft „justify-content“ bestimmt, wie der zusätzliche Platz des Flex-Containers auf die Flex-Items verteilt wird. Der Wert „space-around“ verteilt den Platz so, dass die Flex-Items gleichmäßig mit gleich viel Platz um sie herum platziert werden.
Schauen wir uns als Nächstes ein häufig verwendetes zweidimensionales Layout an:
Wir können dieses Layout nicht mit einer einzelnen Zeile oder einer einzelnen Spalte implementieren, dafür benötigen wir mehrere Zeilen und Spalten, und dafür verwenden wir CSS-Raster. Machen wir es mit CSS Grid:
und das CSS:
.container { max-width: 800px; Rand: 2em auto; Anzeige: Raster; Rastervorlagenspalten: 3fr 1fr; Rastervorlagenzeilen: wiederholen(3,auto); Gitterabstand: 1rem; } .container header { Grid-Bereich: 1/1/2/3; } .container main { Grid-Bereich: 2/1/3/2; } .container aside { Grid-Bereich: 2/2/3/3; } .container footer { Grid-Bereich: 3/1/4/3; } .container > * { Hintergrundfarbe: #ddd; Polsterung: 1rem; }
Wir erstellen zwei Spalten mit Rastervorlagenspalten Eigenschaft und drei Zeilen mit Rastervorlagenzeilen Eigentum. Der wiederholen() Funktion erstellt 3 Zeilen mit automatischer Höhe.
Dann definieren wir innerhalb der Rasterelemente (Kopfzeile, Hauptzeile, Nebenzeile und Fußzeile), wie viel Fläche diese Rasterelemente abdecken, indem wir verwenden Gitterfläche Eigentum.
Flexbox Wraps vs. Grid Wraps
Wenn die Gesamtbreite der Elemente im Container größer als die Breite des Containers ist, haben beide Layoutmodelle in diesem Fall die Möglichkeit, die Elemente in eine neue Zeile einzubinden. Allerdings ist die Art und Weise, wie beide das Wickeln handhaben, unterschiedlich.
Schauen wir uns diesen Unterschied an, indem wir ein Beispiellayout erstellen. Erstellen Sie zwei Zeilen und platzieren Sie 6 Divs in jeder Zeile:
Flexbox
Gitter
Jetzt verwenden wir Flexbox zum Layouten der ersten Reihe und Grid für die zweite:
/* Flexbox-Zeilenstile */ .row-flex { margin: 40px auto; maximale Breite: 600 Pixel; Anzeige: Flex; Flex-Wrap: wickeln; } .row-flex div { border: 1px gestricheltes Grau; Flex: 1 1 100px; Textausrichtung: Mitte; Polsterung: 12px; } /* Rasterzeilenstile */ .row-grid { margin: 40px auto; maximale Breite: 600 Pixel; Anzeige: Raster; Rastervorlagenspalten: wiederholen (automatische Füllung, minmax (100 Pixel, 1 Fr)); } .row-grid div { border: 1px gestricheltes Grau; Textausrichtung: Mitte; Polsterung: 12px; }
Für die erste Reihe verwenden wir Flex: 1 1 100px um den Flex-Elementen eine Basisbreite von 100 Pixel zu geben und sie wachsen und verkleinern zu lassen.
Wir ermöglichen auch das Verpacken von Flex-Elementen innerhalb des Flex-Containers, indem wir die Eigenschaft „Flex-Wrap“ auf setzen wickelnder Standardwert ist nowrap.
Für die zweite Reihe verwenden wir die Rastervorlagenspaltes-Eigenschaft zum Erstellen von Spalten mit einer Mindestbreite von 100 Pixeln, die durch die Funktion minmax() festgelegt wird. Wir verwenden die Funktion „repeat()“, um wiederholt Spalten zu erstellen.
Sie sehen, dass die Schönheit von Grid und Flexbox in der Möglichkeit liegt, die Gegenstände je nach verfügbarem Platz zu dehnen und zu stauchen. Flexbox erreicht dies mit Flex-Grow Und Flex-Schrumpf Eigenschaften, und Grid erreicht dies durch eine Kombination von Minimal Maximal Und automatisch ausfüllen Funktionen innerhalb der Rastervorlagenspalten Eigentum.
Schauen Sie sich jedoch die Zellen 5 und 6 beim Herunterdrücken genau an. Bei der Flexbox haben die Zellen 5 und 6 beim Herunterdrücken nicht die gleiche Größe wie andere Zellen. Im Falle eines Rasters behalten sie hingegen die gleiche Größe wie alle anderen Zellen im Raster.
Dies liegt daran, dass der Flexbox-Layoutalgorithmus ein Flex-Element als Teil von a behandelt, wenn es umschlossen und in eine neue Zeile verschoben wird anders Flex-Container. Daher verliert das verschobene Element seinen Kontext.
Dieses Verhalten könnte in einigen Anwendungsfällen verwendet werden, beispielsweise für ein E-Mail-Abonnentenformular:
Lassen Sie uns dieses Abonnentenformular erstellen:
und geben Sie ihm einige Stile in unserem CSS:
.subscriber-form-container { max-width: 650px; Rand: 40 Pixel automatisch; Rand: 1px gestrichelt grau; Boxgröße: border-box; } .subscriber-form-container form { display: flex; Flex-Wrap: wickeln; } .subscriber-form-container form input { margin: 6px; Polsterung: 0,4rem; Boxgröße: border-box; } .subscriber-form-container form input{ flex: 1 1 150px; } .subscriber-form-container Formulareingabe[type=”email”] {flex: 2 1 300px; }
Die Flex-Eigenschaft ist die Abkürzung für drei Eigenschaften: Flex-Wachstum, Flex-Schrumpf, Und Flex-Basis. Wir möchten, dass die Breite des Felds „E-Mail“ doppelt so breit ist wie die der anderen beiden Eingabeelemente, und wir erreichen dies durch die Verwendung von „Flex-Grow“ und „Flex-Basis“.
Die „Flex-Grow“-Eigenschaft von Eingabeelementen ist auf „1“ gesetzt, die des E-Mail-Eingabeelements jedoch auf 2. Wenn also zusätzlicher Platz verfügbar ist, wächst das E-Mail-Eingabeelement im Vergleich zu anderen Eingabeelementen um das Doppelte.
Flexbox übertrifft Grid in diesem Anwendungsfall. Ja, Sie könnten einen Trick gebrauchen, um CSS Grid dazu zu bringen, dieses Verhalten mit der Funktion minmax() zu reproduzieren, aber Flexbox eignet sich gut für diese Art von eindimensionalen Layouts.
Wenn Sie jedoch ein mehrdimensionales Layout wünschen, bei dem die umschlossenen Elemente ihre Breite beibehalten, beispielsweise eine Bildergalerie, ist Grid die beste Wahl:
Noch etwas: Ist Ihnen aufgefallen, dass wir hier keine Medienabfragen verwenden? Das liegt daran, dass Flexbox- und Grid-Layouts auf dem Konzept der Reaktionsfähigkeit basieren und daher den Einsatz von Medienabfragen reduzieren.
Wird CSS Grid Flexbox in Zukunft obsolet machen?
Absolut nicht.
Genau darum ging es in diesem Artikel.
Derzeit bietet CSS Grid nicht genügend Browserunterstützung, um produktionsbereite Websites zu erstellen. Die allgemeine Faustregel, die ich verwende, ist, dass eine Funktion mehr als 95 % der weltweiten Nutzung abdecken muss. Nur dann verwende ich diese Funktion auf echten Websites. Derzeit deckt Flexbox ab 95 % der weltweiten Nutzungund Gitterabdeckungen 87 % der weltweiten Nutzung.
Bald wird Grid auch von den Browsern gut unterstützt, und wir werden eine Mischung aus Grids und Flexboxen verwenden, um erstaunliche Website-Layouts zu erstellen, die bisher nicht möglich waren.
Ausgewähltes Bild über DepositPhotos.
