Grid oder Flexbox?

Michelle Barker, die Autorin des Materials, das wir heute veröffentlichen, sagt, dass die kürzlich von Chris Koyer gestartete Twitter- Diskussion sie dazu gebracht hat, darüber nachzudenken, wie Webentwickler bei der Entwicklung von Layouts zwischen CSS Grid Layout- und CSS Flexbox Layout-Technologien wählen.



Chris Koyer stellte in seinem Tweet dem Publikum eine Frage, wie diejenigen, die wissen, was Grid und Flexbox bevorzugen, den Unterschied zwischen diesen Technologien erklären.

Unter den Antworten auf diese Frage, die laut Michelle durchaus zu erwarten waren, konnten die wertvollen Ideen von Rachel Andrew und Jen Simmons vermerkt werden.

Laut Rachel soll die Flexbox-Technologie eindimensionale Layouts entwickeln, die beschreiben, wie Elemente in einer Zeile oder Spalte angeordnet sind. Die Grid-Technologie wurde entwickelt, um zweidimensionale Layouts zu entwickeln, die sowohl Zeilen als auch Spalten enthalten.

Laut Jen wird die Grid-Technologie verwendet, um Zeilen- und Spaltenlayouts zu beschreiben. In diesem Fall befindet sich der Inhalt genau so in den Zellen des Layouts, wie es der Entwickler benötigt. Bei Verwendung von Flexbox ist dies nicht der Fall, und es geht nicht nur darum, Daten in der zweiten Dimension zu platzieren (dies ist bereits verständlich), sondern auch darum, sie in einer Dimension zu platzieren. Die Flexbox-Technologie ist für die meisten Fälle, in denen sie verwendet wird, nicht geeignet.

Michelle merkt an, dass das Lesen von Tweets nicht die Funktionen der Verwendung von Grid- und Flexbox-Technologien offenbart. In diesem Artikel möchte sie darüber sprechen, wann und wo diese Technologien eingesetzt werden sollen und warum eine Technologie einer anderen vorgezogen werden kann.

Als Michelle die Antworten auf Chris 'Frage las, war sie überrascht von der Anzahl der Personen, die sagten, dass sie das Raster nur für Layouts auf Seitenebene und Flexbox für alles andere verwenden würden. Wenn Sie sich auch an eine solche Regel halten, bedeutet dies, dass Sie sich ernsthaft darauf beschränken, die leistungsstarken Funktionen von Grid in verschiedenen Situationen zu nutzen. Die Hauptsache, die der Autor des Materials Webentwicklern empfehlen möchte, ist, dass jedes Layout als etwas Besonderes wahrgenommen wird, die verfügbaren Funktionen analysiert werden und keine Annahmen darüber getroffen werden, welche Technologien für die Erstellung erforderlich sind. Hier sind einige Fragen, die Sie sich stellen können, wenn Sie eine Technologie auswählen, die für die Layoutentwicklung geeignet ist.

Wie viele Berechnungen müssen Sie durchführen?

Hier ist meine Antwort auf Chris 'Frage. Ich sagte dann, wenn es mir scheint, dass Sie beim Erstellen des Layouts die calc() CSS-Funktion zu oft verwenden müssen, bedeutet dies normalerweise, dass ich die Grid-Technologie und nicht die Flexbox benötige.

Wenn Sie häufig auf die Funktion calc() zurückgreifen müssen, um die Größe von Zeilen und Spalten genau zu berechnen (wenn Sie beispielsweise interne Felder berücksichtigen müssen), bedeutet dies häufig, dass Sie die Verwendung der Grid-Technologie in Betracht ziehen sollten, da die Verwendung von unit Das Messen von fr Ihr Leben erheblich vereinfachen. Obwohl dieser Rat als allgemeine Empfehlung durchaus praktikabel ist, beschreibt er nicht das vollständige Bild dessen, was passiert. Manchmal wird Grid auch in solchen Fällen benötigt, in denen die Funktion calc() beim calc() des Layouts nicht verwendet wird. Zum Beispiel in einer Situation, in der es sich um ein zweidimensionales Layout mit einer festen Breite handelt, dessen Elemente 200 Pixel breit sind. Bei der Entwicklung eines solchen Layouts wird die Funktion calc() nicht benötigt, um die Breite der Elemente zu ermitteln. Gleichzeitig kann das Verhalten von Layouts, die auf der Grundlage des Rasters erstellt werden, äußerst nützlich sein. Ebenso sind Situationen möglich, in denen es am besten ist, Flexbox zu verwenden und zwangsläufig die Funktion calc() verwenden. Infolgedessen wird das, worüber wir hier sprechen, am besten nicht als starre Regel wahrgenommen: „ calc() und Flexbox verwenden? Sie müssen also zu Grid wechseln “, aber als Information zum Nachdenken.

Eine Dimension oder zwei?

Ein wesentlicher Unterschied zwischen Grid- und Flexbox-Technologien besteht darin, dass Sie mit der ersten die Anordnung von Elementen in zwei Dimensionen (in Zeilen und Spalten) steuern können und mit der zweiten nicht. Auch dies bedeutet nicht, dass Sie Grid niemals für eindimensionale Layouts verwenden sollten. Ich wähle oft das Raster - in den Fällen, in denen ich eine hohe Genauigkeit bei der Steuerung der Größe und Position von Elementen in einer Dimension benötige. Dieser Ansatz wird in diesem Beispiel in CodePen und in diesem Begleitartikel demonstriert.


Gitterbeispiel

Wie sollen sich Elemente verhalten?

Die Verwendung der Grid-Technologie ist häufig in Fällen sinnvoll, in denen der Entwickler die Kontrolle über das Verhalten des Layouts in zwei Dimensionen benötigt. Dies bedeutet jedoch nicht, dass das Grid immer besser als Flexbox ist. Bei der Verwendung des Rasters stehen dem Entwickler Zeilen und Spalten, Zellen und sogenannte Rasterbereiche zur Verfügung, die eine Zelle oder eine Gruppe mehrerer Zellen sind. Bei Verwendung eines Rasters müssen sich Elemente in diesen Zellen oder Bereichen befinden.

Angenommen, wir haben ein gitterbasiertes Layout, das sich in den folgenden Merkmalen unterscheidet: Es gibt neun Elemente, die in drei Reihen zu je drei Elementen von links nach rechts angeordnet sind. Zwischen den Elementen befinden sich 20 Pixel. Ein solches Layout kann sowohl mit Grid als auch mit Flexbox erstellt werden. Der Code zur Beschreibung eines solchen gitterbasierten Layouts ist viel einfacher und übersichtlicher:

 .grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-rows: 200px;   /*     ,   ,      .        , `auto`,  ,        . */   gap: 20px; } 

Die Verwendung eines solchen Layouts führt dazu, dass die Elemente automatisch platziert werden, während wir nichts anderes tun müssen. Wenn wir uns Zeit zum Nachdenken geben, können wir die Funktionen Grid auto-fit() und minmax() , mit denen wir ein vollständig ansprechendes Layout erhalten, ohne Medienabfragen zu verwenden. Öffnen Sie dieses Beispiel, ändern Sie die Größe des Fensters und sehen Sie sich an, was passiert.


Gitterbeispiel

In diesem Video erfahren Sie mehr über diese Technik und einige andere nützliche Dinge.

Wenn wir mit Flexbox ein ähnliches Layout erstellen würden, müssten wir im Gegensatz zu dem gerade beschriebenen Beispiel sowohl die Elemente als auch den Container stilisieren:

 .grid {   display: flex;   flex-wrap: wrap;   margin: -10px;   width: calc(100% + 20px); } .item {   width: calc((100% / 3) - 20px);   flex: 0 0 auto;   margin: 0 10px 20px 10px; } 

Hier im Container müssen Sie einen negativen Wert für die Eigenschaft margin angeben, um die Tatsache zu neutralisieren, dass die Gesamtbreite der Elemente größer als der Container selbst ist, und damit Daten in die nächste Zeile zu übertragen. Darüber hinaus kann dieses Beispiel nicht das gleiche Reaktionsverhalten ohne zusätzlichen Aufwand zeigen. Ferner sollte beachtet werden, dass hier möglicherweise die Verwendung von Medienabfragen erforderlich sein kann.

Hier ist ein Beispiel für CodePen, das das Obige veranschaulicht.


Flexbox-Beispiel

Es gibt verschiedene Möglichkeiten, dasselbe Layout mit Flexbox zu erstellen, aber alle erfordern die Verwendung einiger „Hacks“. Dies geschieht aus dem Grund, dass dies ihre Natur ist. In der Tat sprechen wir über die Tatsache, dass wir versuchen, die Flexbox-Technologie für das zu verwenden, wofür sie nicht wirklich gedacht ist. Dies bedeutet jedoch nicht, dass Flexbox immer eine erfolglose Wahl der Basis für das Layout ist.

Viele moderne CSS-Frameworks verwenden eine Variation dieser Methode, um Layouts darzustellen. Übrigens, wenn Sie diesen Weg gehen möchten, kann ich Susy empfehlen, eine Reihe von Tools, die alle Schwierigkeiten bei der Erstellung solcher Layouts übernehmen.

Was ist in dieser Situation besser zu wählen? Grid oder Flexbox? Es scheint, dass Grid hier einige unbestreitbare Vorteile hat, aber um diese Frage zu beantworten, müssen wir darüber nachdenken, was passieren soll, wenn wir mehr als neun, aber weniger als 12 Elemente haben (falls es welche gibt) Beispiel 12, dann können sie dann eine neue Zeile vollständig ausfüllen. Müssen die neuen Elemente einfach am Anfang der nächsten Zeile stehen, wie es in den Beispielen der Fall war? Oder müssen sie sich anders verhalten? Wenn sich in der nächsten Zeile nur ein Element befindet, muss es möglicherweise den gesamten Platz in dieser Zeile einnehmen, wie in Option A des folgenden Beispiels? Oder wenn die neue Zeile nur zwei Elemente enthält, müssen sie zentriert werden, wie in Beispiel B?


Verschiedene Optionen zum Platzieren von Elementen in der letzten Zeile

Bei Verwendung eines gitterbasierten Layouts mit automatischer Platzierung von Elementen haben wir nur eine Option: Platzieren eines neuen Elements in einer zugänglichen Zelle auf der linken Seite. Eine ähnliche Anordnung von Elementen findet sich in früheren Beispielen. Hier gehen wir von der Annahme aus, dass die Richtungseigenschaft nicht auf rtl (in diesem Fall würden sich die Elemente von rechts nach links befinden und das einzige Element in der letzten Zeile würde sich in der rechten Zelle befinden). Infolgedessen werden neue Elemente bei Verwendung des Rasters in den folgenden verfügbaren Rasterzellen platziert. Mit der Flexbox-Technologie können Sie das Layout von Elementen flexibel steuern. Dies bedeutet, dass wir das Verhalten von Elementen mithilfe einer Kombination von Eigenschaften steuern können, die die Platzierung von Elementen und deren Ausrichtung steuern.

Hier ist ein Beispiel, das solche Layouts demonstriert, wenn ein oder zwei Elemente pro Zeile, berechnet auf drei Elementen, diese gesamte Zeile belegen.


Der Artikel belegt den gesamten verfügbaren Zeilenbereich.

Infolgedessen stellt sich heraus, dass es unabhängig von der zum Erstellen des Layouts verwendeten Technologie darauf ankommt, welche Art von Verhalten die im Layout befindlichen Elemente für den Entwickler von Interesse sind. Und in verschiedenen Situationen können unterschiedliche Antworten auf dieselbe Frage gegeben werden.

Versuchen Sie, Flexbox durch ein Grid zu ersetzen?

Wenn ich auf verschiedenen Veranstaltungen spreche, werde ich oft gefragt, wann ich Flexbox anstelle von Grid verwenden würde und ob wir wirklich Technologien wie Flexbox benötigen. Wie wir im vorherigen Beispiel gesehen haben, ist Grid kein Ersatz für Flexbox. Beide Technologien koexistieren recht friedlich, und die Kenntnis der Situationen, in denen sich jede von ihnen am besten zeigt, erweitert die Möglichkeiten für die Gestaltung von Layouts.


Komponentenbeispiel

Diese Abbildung zeigt eine Komponente während der Arbeit, mit der die Platzierung von Text, Bild und Titel sowohl unter Berücksichtigung von Spalten als auch unter Berücksichtigung von Zeilen gesteuert werden muss. Auch hier müssen Sie steuern, wie sie bis zu einem gewissen Grad miteinander interagieren. Die einzige Möglichkeit, dieses Problem zufriedenstellend zu lösen, ist die Verwendung der Grid-Technologie.
Ohne zu zögern werde ich die Flexbox-Technologie verwenden, um ein Navigationsmenü wie das in diesem Beispiel gezeigte zu erstellen.


Von Flexbox erstellte Menüs

Hier ist es notwendig, die Anordnung der Elemente in einer einzigen Dimension zu steuern, und es ist notwendig, dass sich die Elemente flexibel verhalten. Die Flexbox-Technologie macht ihren Job perfekt. Dank der Verwendung von Flexbox können Sie festlegen, ob diese Elemente in neue Zeilen eingeschlossen werden sollen oder nicht. Auf diese Weise können Sie sie genau anzeigen, wenn auf dem verfügbaren Platz auf der Seite nicht alle Elemente in einer Zeile angezeigt werden können.

Wie sollte das Layout in Browsern aussehen, die die Grid-Technologie nicht unterstützen?

Wenn wir die Grid-Technologie verwenden, ist eines der möglichen Probleme, die wir berücksichtigen müssen, die Browserunterstützung für diese Technologie. Hier müssen wir auch darüber nachdenken, was passieren wird, wenn unsere Seite in einem der Browser angezeigt wird, die Grid nicht unterstützen (z. B. in IE 11 und darunter). Mein Ansatz zur Lösung dieses Problems besteht darin, @supports Regeln zu verwenden und Code für verschiedene Browser vorzubereiten. Oft (aber nicht immer) verwende ich als Ersatz für ein Grid-basiertes Layout ein Flexbox-basiertes Layout für ziemlich alte Browser.

 .grid {   display: flex;   flex-wrap: wrap;   /*  ,     */ } @supports (display: grid) {   .grid {       display: grid;       /*  ,  Grid */   } } 

Es sollte hier angemerkt werden, dass Sie, wenn Sie viele Stunden damit verbringen, ohne Verwendung des Rasters neu zu erstellen, was mit dieser Technologie getan wurde, möglicherweise von Anfang an nicht so viel hatten Es gibt viele Gründe, Grid zu verwenden. Schließlich ist diese Technologie insofern besonders gut, als sie in der Lage ist, was nicht ausschließlich mit Flexbox möglich ist.

Zusammenfassung

Wir haben einige sehr einfache und weit verbreitete Beispiele für die Layoutentwicklung diskutiert und die Merkmale der Verwendung von Grid- und Flexbox-Technologien bei ihrer Konstruktion untersucht. Wir hoffen, dass wir diejenigen zum Nachdenken anregen konnten, die damit beschäftigt sind, die richtige Technologie für ihr nächstes Layout auszuwählen.

Liebe Leser! In welchen Situationen verwenden Sie die Grid-Technologie und in welchen - Flexbox?