Schnell! Was ist der Unterschied Zwischen Flexbox-und Grid?

0
34

Let ‘ s go rapid fire und versuchen, diese Frage zu beantworten, mit quick-Punkte eher als lange Erklärungen. Es gibt eine Menge von ähnlichkeiten zwischen flexbox und raster, beginnend mit der Tatsache, dass Sie verwendet werden, für layout und viel mächtiger als alle layout-Technik, die vor kam. Sie können sich dehnen und schrumpfen, Sie können Zentrum der Dinge, Sie können re-bestellen Sie Dinge, die können Sie Dinge ausrichten… Es gibt viele layout-Situationen, in denen man entweder eine zu tun, was wir tun müssen, und viele Situationen, in denen eine mehr geeignet als die anderen. Wir konzentrieren uns auf die Unterschiede anstatt die Gemeinsamkeiten:

Flexbox kann Optional wickeln. Wenn wir zulassen, dass ein flex-container zu wickeln, Sie werden wickeln Sie nach unten auf eine andere Zeile, wenn Sie die flex-items füllen eine Zeile. Wo Sie die Linie bis auf die nächste Zeile ist unabhängig von dem, was happenned in der ersten Zeile, so dass für ein Mauerwerk Aussehen.

Gitter können Optional auch umbrechen (wenn wir zulassen, dass die automatische Befüllung) in dem Sinne, dass Elemente können füllen Sie eine Zeile und die neue Zeile (oder das auto an sich), sondern wie Sie es tun, Sie fallen entlang der Gitterlinien alle anderen Elemente.

Flexbox oben, Raster unten

Könnte man denken, dass flexbox als “ein-dimensional.” Während flexbox machen können Zeilen und Spalten in dem Sinne, dass es erlaubt, Elemente zu wickeln, es gibt keine Möglichkeit, deklarativ zu Steuern, wo die Elemente am Ende da die Elemente lediglich schieben Sie entlang einer einzigen Achse, und dann wickeln oder nicht wickeln entsprechend. Sie tun, wie Sie tun, wenn Sie entlang einer eindimensionalen Ebene aus und es ist, weil der einzige dimension, die wir Optional können Dinge tun, wie Elemente ausrichten entlang einer Grundlinie — und das ist etwas, das raster ist nicht in der Lage, das zu tun.

.Elternteil {
display: flex;
flex-flow: row wrap; /* OK Elementen, wie weit Sie können auf eine Zeile, dann wickeln Sie wie Sie sehen, passen */
}

Könnte man denken, dass grid als “zwei-dimensionale können wir (wenn wir wollen) deklarieren Sie die Größe von Zeilen und Spalten, und dann explizit die Dinge, die in Zeilen und Spalten, wie wir wählen.

.Elternteil {
display: grid;
grid-template-columns: 3fr 1fr; /* Zwei Spalten, drei mal so breit ist wie die anderen */
grid-template-rows: 200px 100px auto; /* Drei Spalten, zwei mit expliziten breiten */
grid-template-Bereiche:
“header header header”
“main . sidebar”
“Fußzeile Fußzeile Fußzeile”;
}

/*
Nun, wir können explizit platzieren Sie Elemente in den definierten Zeilen und Spalten.
*/
.Kind-1 {
grid-Bereich: Kopf;
}

.Kind-2 {
grid-Bereich: main;
}

.Kind-3 {
grid-Bereich: mit Seitenleiste;
}

.Kind-4 {
grid-Bereich: footer;
}

Flexbox oben, Raster unten

Ich bin nicht der Welt größte fan von “1D” und “2D” Differenzierung von grid vs. flexbox, nur weil ich die meisten meiner Tag-zu-Tag Nutzung von grid ist “1D” und es ist toll. Ich würde nicht wollen, dass jemand zu denken, Sie haben zu verwenden, flexbox und nicht Netz, denn grid ist nur, wenn Sie brauchen, 2D. Es ist eine starke Unterscheidung obwohl das 2D-layout ist möglich, mit raster, obwohl in der Hinsicht ist es nicht in der flexbox.

Grid wird im wesentlichen auf das übergeordnete element. In flexbox, die meisten des Layouts (jenseits der Grundlagen) passieren, auf die Kinder.

/*
Die flex-Kinder, die die meiste Arbeit zu tun
*/
.flexbox – {
display: flex;
> div {
&:nth-child(1) { // logo
flex: 0 0 100px;
}
&:nth-child(2) { // Suche
flex: 1;
max-Breite: 500 Pixel;
}
&:nth-child(3) { // avatar
flex: 0 0 50px;
margin-left: auto;
}
}
}

/*
Die grid-parent macht die meiste Arbeit
*/
.grid {
display: grid;
grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr;
grid-template-rows: 100px wiederholen(3, auto) 100px;
grid-gap: 10px;
}

Grid ist besser überlappen. Erste Elemente überschneiden sich in der flexbox erfordert den Blick auf die traditionellen Dinge, wie negative Margen, verwandelt, oder absolute Positionierung, um zu brechen aus dem flex-Verhalten. Mit Gitter, wir können Gegenstände auf überlappende raster-Linien, oder sogar innerhalb der gleichen genaue Netz-Zellen.

Flexbox oben, Raster unten

Grid ist robuster. Während die Beugung des flexbox-manchmal ist es die Stärke, die Art und Weise ein flex-Element ist so bemessen wird ziemlich kompliziert. Es ist eine Kombination aus width, min-width, max-width, flex-basis, flex-grow, flex-shrink, nicht zu erwähnen, die Inhalte innerhalb und Dinge wie white-space, wie auch die anderen Elemente in der gleichen Zeile. Grid hat interessante raumfordernden Eigenschaften, wie gebrochene Einheiten, und die Fähigkeit, für Inhalte zu brechen, Netze, obwohl, allgemein gesprochen, wir sind einrichten raster und Platzierung der Elemente in Ihnen, dass plop rechts in den Ort.

Flexbox können push Dinge Weg. Es ist ein ziemlich einzigartiges feature flexbox, dass Sie können, zum Beispiel, setzen margin-right: auto; ein element, wenn Platz da ist, wird dieses element drücken, alles andere so weit Weg, wie es gehen kann kann.

Hier sind einige meiner Lieblings-tweets zu dem Thema:

flexbox aussieht wie es das tut, was Sie wollen
aber grid ist in der Regel, was Sie wollen

— Alte Wache Rupert (@davatron5000) 25. Januar 2019

Grid macht die tatsächlichen Spalten und Zeilen. Inhalt line-up von einem zum anderen, als Sie Sie Fragen. Flexbox nicht. Nicht nur in der zweiten dimension (welches ist am einfachsten zu reden), aber auch in der ersten dimension. Flexbox ist nicht für die meisten der Dinge, die wir verwendet haben.

— Jen Simmons (@jensimmons) Januar 26, 2019

Wie wäre es damit:#Flexbox ist für die Ausrichtung. #CSSGrid ist für das layout.

Dies ist fast immer, wie ich wind-up mit Ihnen. Es erlaubt Ihnen, zu bewahren in Ihren Beziehungen zu einander. Außerdem können Sie verwendet werden, für seine Stärke, auch wenn jeder tun kann, ist die andere Sache.

— Brian Haferkamp (@BrianHaferkamp) 25. Januar 2019

Wenn Sie beginnen, einschränken aller flex-Elemente mit einer Breite, dann mehr als oft nicht, wird es einfacher sein zu verwenden raster.

— Rachel Andrew (@rachelandrew) 25. Januar 2019

Hier ist ein weiterer Unterschied, aber es ist nicht ein beliebter Weg beschreiben, der Ihnen einfach nur Spaß dumme wissen:

flexbox 2 Pässe zu beenden
grid 3

man könnte also sagen, das Netz ist langsam und flexbox ist schnell lol

— Adam Argyle (@argyleink) 25. Januar 2019

Für mich ist Grid ist es zu großen ganze layout..Tippschein mit mehr Kontrolle darüber, wie das ganze werden/Seite zusammen kommt, in der Erwägung, dass flexbox hilft mir, mich zu positionieren und auszurichten (ob es im Netz oder nicht).

Für mich ist es zum Zweck.

— Mandy Michael (@Mandy_Kerr) 25. Januar 2019

Die Unterscheidung zwischen beiden oft verschwommen ist, vor allem jetzt, dass wir auch `Lücke` für flexbox. Grid ist am besten geeignet für ein paar wenige spezielle Anwendungsfälle (2D natürlich, aber auch Dinge wie überlappende Elemente), während die flexbox-in der Regel strahlt in einfacher noch mit gängigen layout-Anforderungen.

— Benjamin De Cock (@bdc) 25. Januar 2019

Verwenden Sie raster, wenn Sie bereits über die layout-Struktur im Sinn, und flex, wenn Sie nur wollen, dass alles passt. Layout zunächst wird die vs zuerst den Inhalt.

— Beverly (@aszenitha) 25. Januar 2019