Schnell! Was ist der Unterschied zwischen Flexbox und Grid?

Machen wir ein schnelles Feuer und versuchen, diese Frage mit kurzen Stichpunkten statt langen Erklärungen zu beantworten. Es gibt viele Ähnlichkeiten zwischen Flexbox und Grid, angefangen damit, dass sie für Layouts verwendet werden und viel leistungsfähiger sind als jede Layout-Technik, die ihnen vorausging. Sie können sich dehnen und schrumpfen, sie können Dinge zentrieren, sie können Dinge neu ordnen, sie können Dinge ausrichten... Es gibt viele Layout-Situationen, in denen Sie beide verwenden könnten, um das zu tun, was wir tun müssen, und viele Situationen, in denen eines besser geeignet ist als das andere. Konzentrieren wir uns auf die Unterschiede und nicht auf die Ähnlichkeiten

---

Flexbox kann optional umbrechen. Wenn wir einem Flex-Container erlauben, umzubrechen, brechen sie auf eine neue Zeile um, wenn die Flex-Items eine Zeile füllen. Wo sie sich in der nächsten Zeile ausrichten, ist unabhängig davon, was in der ersten Zeile passiert ist, und ermöglicht ein schieberartiges Aussehen.

Grid kann ebenfalls optional umbrechen (wenn wir eine automatische Füllung erlauben) in dem Sinne, dass Items eine Zeile füllen und zur neuen Zeile wechseln (oder sich automatisch platzieren), aber dabei folgen sie denselben Gitterlinien wie alle anderen Elemente.

---

Man kann Flexbox als „eindimensional“ betrachten. Während Flexbox Zeilen und Spalten erstellen kann, da es Elementen erlaubt umzubrechen, gibt es keine Möglichkeit, deklarativ zu steuern, wo Elemente landen, da die Elemente lediglich entlang einer einzigen Achse verschoben werden und dann entsprechend umbrechen oder nicht umbrechen. Sie tun, was sie tun, wenn man so will, entlang einer eindimensionalen Ebene, und gerade wegen dieser einzelnen Dimension können wir optional Dinge tun, wie Elemente entlang einer Grundlinie ausrichten – was Grid nicht kann.

.parent {
  display: flex;
  flex-flow: row wrap; /* OK elements, go as far as you can on one line, then wrap as you see fit */
}

Man kann Grid als „zweidimensional“ betrachten, da wir (wenn wir wollen) die Größe von Zeilen und Spalten deklarieren und dann Elemente explizit in beide Zeilen und Spalten platzieren können, wie wir es wünschen.

.parent {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* Three columns, one three times as wide as the others */
  grid-template-rows: 200px auto 100px; /* Three rows, two with explicit widths */
  grid-template-areas:
    "header header header"
    ". main sidebar"
    "footer . .";
}

/*
  Now, we can explicitly place items in the defined rows and columns.
*/
.child-1 {
  grid-area: header;
}

.child-2 {
  grid-area: main;
}

.child-3 {
  grid-area: sidebar;
}

.child-4 {
  grid-area: footer;
}

Ich bin kein großer Fan der Unterscheidung „1D“ vs. „2D“ von Grid vs. Flexbox, nur weil ich feststelle, dass die meiste meiner täglichen Nutzung von Grid „1D“ ist und es dafür großartig ist. Ich möchte nicht, dass jemand denkt, er müsse Flexbox und nicht Grid verwenden, weil Grid nur für 2D gedacht ist. Es ist jedoch ein starker Unterschied, dass 2D-Layout mit Grid möglich ist, mit Flexbox aber nicht.

---

Grid wird größtenteils auf dem Elternelement definiert. In Flexbox findet der größte Teil des Layouts (über die ganz grundlegenden Dinge hinaus) auf den Kindern statt.

/*
  The flex children do most of the work
*/
.flexbox {
  display: flex;
  > div {
    &:nth-child(1) { // logo
      flex: 0 0 100px;
    }
    &:nth-child(2) { // search
      flex: 1;
      max-width: 500px;
    }
    &:nth-child(3) { // avatar
      flex: 0 0 50px;
      margin-left: auto;
    }
  }
}

/*
  The grid parent does most of the work
*/
.grid {
  display: grid;
  grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr;
  grid-template-rows: 100px repeat(3, auto) 100px;
  grid-gap: 10px;
}

---

Grid ist besser im Überlappen. Um Elemente in Flexbox überlappen zu lassen, muss man auf traditionelle Dinge zurückgreifen, wie negative Abstände, Transformationen oder absolute Positionierung, um aus dem Flex-Verhalten auszubrechen. Mit Grid können wir Elemente auf überlappenden Gitterlinien platzieren oder sogar direkt in denselben Gitterzellen.

---

Grid ist robuster. Während das Flexen von Flexbox manchmal seine Stärke ist, wird die Art und Weise, wie ein Flex-Item dimensioniert wird, recht kompliziert. Es ist eine Kombination aus width, min-width, max-width, flex-basis, flex-grow und flex-shrink, ganz zu schweigen vom Inhalt und Dingen wie white-space, sowie den anderen Items in derselben Zeile. Grid hat interessante Platzbelegungsfunktionen, wie Fraktionseinheiten und die Fähigkeit, dass Inhalt Grids aufbrechen kann, obwohl wir im Allgemeinen Gitterlinien einrichten und Elemente darin platzieren, die genau an ihren Platz fallen.

---

Flexbox kann Dinge wegschieben. Es ist ein ziemlich einzigartiges Merkmal von Flexbox, dass Sie beispielsweise margin-right: auto; auf ein Element setzen können und, wenn Platz vorhanden ist, dieses Element alles andere so weit wegschieben wird, wie es kann.

---

Hier sind einige meiner Lieblings-Tweets zu diesem Thema

Flexbox sieht so aus, als würde es das tun, was Sie wollen
aber Grid ist meistens das, was Sie wollen

— Old Guard Rupert (@davatron5000) 25. Januar 2019

Grid erstellt tatsächliche Spalten und Zeilen. Inhalte werden von einer zur anderen ausgerichtet, wie Sie es wünschen. Flexbox nicht. Nicht nur in der zweiten Dimension (die am einfachsten zu erklären ist), sondern auch in der ersten Dimension. Flexbox ist nicht für die meisten Dinge, für die wir es verwendet haben.

— Jen Simmons (@jensimmons) 26. Januar 2019

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

Das ist fast immer so, wie ich sie am Ende benutze. Es erlaubt ihnen, ihre Beziehungen zueinander beizubehalten. Es erlaubt auch jedem, für seine Stärke genutzt zu werden, obwohl jeder auch das andere tun kann.

— Brian Haferkamp (@BrianHaferkamp) 25. Januar 2019

Wenn Sie beginnen, alle Ihre Flex-Items mit einer Breite zu beschränken, dann ist es meist einfacher, Grid zu verwenden.

— Rachel Andrew (@rachelandrew) 25. Januar 2019

Hier ist ein weiterer Unterschied, aber es ist keine bevorzugte Art, sie zu beschreiben, nur lustiges unnützes Wissen

Flexbox braucht 2 Durchgänge, um fertig zu werden
Grid braucht 3

Man könnte also sagen, Grid ist langsam und Flexbox ist schnell lol

— Adam Argyle (@argyleink) 25. Januar 2019

Für mich ist Grid für das Erstellen von vollständigen Layouts da... Grids... mit mehr Kontrolle darüber, wie das Ganze/die Seite zusammenkommt, während Flexbox mir hilft, zu positionieren und auszurichten (egal ob in einem Grid oder nicht).

Für mich geht es um den Zweck.

— Mandy Michael (@Mandy_Kerr) 25. Januar 2019

Die Unterscheidung zwischen den beiden ist oft verschwommen, besonders jetzt, da wir auch `gap` für Flexbox haben. Grid ist am besten für einige spezifische Anwendungsfälle geeignet (offensichtlich 2D, aber auch Dinge wie überlappende Elemente), während Flexbox normalerweise bei einfacheren, aber häufigen Layoutanforderungen glänzt.

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

Verwenden Sie Grid, wenn Sie die Layoutstruktur bereits im Kopf haben, und Flex, wenn Sie nur möchten, dass alles passt. Erst das Layout, dann der Inhalt.

— Beverly (@aszenitha) 25. Januar 2019