Gleiche Spalten mit Flexbox: Es ist komplizierter, als Sie vielleicht denken

Sie erhalten ein ansprechend gestaltetes Design, das einen schönen, großen Hero-Bereich aufweist, gefolgt von einer dieser Drei-Spalten-Aufteilungen direkt darunter. Sie wissen schon, wie bei fast jeder anderen Website, an der Sie jemals gearbeitet haben.

Sie arbeiten den Hero-Bereich durch und machen sich an die Drei-Spalten-Sektion. Es ist Zeit, unseren treuen Freund Flexbox herauszuholen! Außer, Sie schreiben display: flex und erhalten stattdessen dieses Durcheinander, anstatt die drei gleichen Spalten zu bekommen, die Sie erwarten würden.

Dies geschieht aufgrund der Art und Weise, wie Flexbox die Basisgröße eines Elements berechnet. Sie haben wahrscheinlich viele Flexbox-Tutorials gelesen, und viele davon (einschließlich meiner eigenen) sind ein übermäßig vereinfachtes Beispiel dafür, was Flexbox tut, ohne *wirklich* in die komplexen Dinge einzutauchen, die Flexbox für uns tut und die wir als selbstverständlich ansehen.

Ich bin sicher, Sie haben Beispiele und Tutorials gesehen, die sich mit so etwas wie diesem befassen, bei dem drei divs um den Inhalt schrumpfen, der sich darin befindet

Mit anderen Worten, wir erhalten einige Block-Elemente, die schrumpfen und nebeneinander platziert werden. Es scheint, als ob Flexbox Dinge so klein wie möglich machen will. Aber in Wirklichkeit will Flexbox Dinge so groß wie möglich machen.

Moment, *was*? Flex schrumpft Dinge standardmäßig – das kann nicht richtig sein! Oder?

So großartig Flexbox auch ist, was es im Hintergrund tut, ist eigentlich ein wenig seltsam, denn standardmäßig tut es zwei Dinge gleichzeitig. Es betrachtet zuerst die Inhaltsgröße, die wir erhalten würden, wenn wir width: max-content auf einem Element deklarieren würden. Aber zusätzlich dazu leistet auch flex-shrink etwas Arbeit, indem es den Elementen erlaubt, kleiner zu sein, aber nur, *falls nötig*.

Um wirklich zu verstehen, was vor sich geht, brechen wir diese beiden Punkte auf und sehen uns an, wie sie zusammenarbeiten.

Eintauchen in max-content

max-content ist ein ziemlich nützlicher Eigenschaftswert in bestimmten Situationen, aber wir wollen verstehen, wie er in dieser speziellen Situation funktioniert, in der wir versuchen, drei scheinbar einfache, gleiche Spalten zu erhalten. Lassen Sie uns also Flexbox für einen Moment beiseitelassen und sehen, was max-content für sich allein tut.

MDN macht gute Arbeit, es zu erklären

Das Schlüsselwort für die Größenbestimmung max-content repräsentiert die intrinsische maximale Breite des Inhalts. Für Textinhalte bedeutet dies, dass der Inhalt überhaupt nicht umgebrochen wird, selbst wenn dies zu Überläufen führt.

Intrinsisch könnte Sie hier verwirren, aber es bedeutet im Grunde, dass wir dem Inhalt erlauben, die Breite zu bestimmen, anstatt dass wir *explizit* eine feste Breite festlegen. Uri Shaked beschreibt das Verhalten treffend, indem er sagt: „Der Browser tut so, als hätte er unendlich viel Platz und legt den gesamten Text in einer einzigen Zeile aus, während er seine Breite misst.“

Also, kurz gesagt, max-content erlaubt dem Inhalt selbst, die Breite des Elements zu definieren. Wenn Sie einen Absatz haben, ist die Breite dieses Absatzes der darin enthaltene Text ohne Zeilenumbrüche. Wenn es ein langer Absatz ist, kommt es zu horizontalem Scrollen.

Kehren wir zu diesem übermäßig vereinfachten Beispiel von drei Block-Elementen zurück, die schrumpfen und nebeneinander platziert werden. Das geschieht nicht wegen flex-shrink; es geschieht, weil das die Größe dieser Elemente ist, wenn ihre deklarierte Breite max-content ist. Das ist buchstäblich so breit, wie sie gehen, weil das so breit ist, wie der kombinierte Inhalt innerhalb jedes Elements.

Hier, schauen Sie sich diese Elemente ohne Flexbox an, die ihre Flexbox-Sachen tun, aber stattdessen mit einer width: max-content

Wenn also nur eine kleine Textmenge vorhanden ist, schrumpft die intrinsische max-content-Größe die Dinge, anstatt flex-shrink. Natürlich kommt Flexbox mit seinem Standardverhalten flex-direction: row hinzu, das die Flex-Elemente zu Spalten macht und sie direkt nebeneinander platziert. Hier ist ein weiterer Blick, aber mit dem hervorgehobenen freien Platz.

flex-shrink in die Gleichung einbeziehen

Wir sehen also, dass die Deklaration von display: flex die intrinsische max-content-Größe auf Flex-Elemente überträgt. Diese Elemente wollen so groß sein wie ihr Inhalt. Aber es gibt noch eine weitere Standardeinstellung, die hier ins Spiel kommt, nämlich flex-shrink.

flex-shrink betrachtet im Grunde alle Flex-Elemente in einem flexiblen Container, um sicherzustellen, dass sie nicht über den Elternelement **hinausragen. Wenn alle Flex-Elemente nebeneinander passen, ohne den flexiblen Container zu überlaufen, tut flex-shrink nichts... seine Aufgabe ist bereits erledigt.

Aber wenn die Flex-Elemente den Container überlaufen (dank dieser max-content-Intrinsik-Breite), dürfen die Flex-Elemente schrumpfen, um diesen Überlauf zu verhindern, da flex-shrink darauf achtet.

Deshalb hat flex-shrink einen Standardwert von 1. Ohne diesen Wert würde es ziemlich schnell unübersichtlich werden.

Hier ist der Grund, warum die Spalten nicht gleich sind

Wenn wir zu unserem Design-Szenario zurückkehren, in dem wir drei gleich breite Spalten unter einem Hero benötigen, haben wir gesehen, dass die Spalten nicht gleich breit sind. Das liegt daran, dass Flexbox zuerst die Inhaltsgröße jedes Flex-Elements betrachtet, bevor es überhaupt daran denkt, sie zu schrumpfen.

Der Einfachheit halber, während wir tiefer in dieses Thema eintauchen, arbeiten wir mit schönen runden Zahlen. Das können wir tun, indem wir Breiten auf unseren Flex-Elementen deklarieren. Wenn wir eine Breite auf einem Flex-Element deklarieren, verwerfen wir die intrinsische Größe und legen stattdessen einen expliziten Wert fest. Das macht es viel einfacher herauszufinden, was wirklich vor sich geht.

Im unten stehenden Pen haben wir ein Elternelement, das ein 600px breiter flexibler Container ist (display: flex). Ich habe alles entfernt, was die Zahlen beeinflussen könnte, also kein gap oder padding. Ich habe auch den border durch eine outline ersetzt, damit wir alles weiterhin leicht visualisieren können.

Die erste und dritte Flex-Element haben eine width: 300px und die mittlere eine width: 600px. Wenn wir das alles zusammenzählen, ergibt sich eine Gesamtsumme von 1200px. Das ist größer als die 600px, die im Elternelement verfügbar sind, also greift flex-shrink.

flex-shrink ist ein Verhältnis. Wenn alles das gleiche flex-shrink hat (was standardmäßig 1 ist), schrumpfen sie alle mit der gleichen Rate. Das bedeutet nicht, dass sie alle auf die gleiche Größe oder um den gleichen Betrag schrumpfen, aber sie schrumpfen alle mit der gleichen Rate.

Wenn wir zurück in die Firefox DevTools springen, können wir die Basisgröße, flex-shrink und die Endgröße sehen. In diesem Fall sind die beiden 300px-Elemente jetzt 150px und das 600px-Element ist jetzt 300px.

Wenn wir alle Basisgrößen aller drei Flex-Elemente (die tatsächlichen Breiten, die wir auf sie gesetzt haben) addieren, ergibt sich eine Gesamtsumme von 1200px. Unser Flex-Container ist 600px breit. Wenn wir alles durch 2 teilen, passt es! Sie schrumpfen alle mit der gleichen Rate und teilen ihre eigenen Breiten durch 2.

Es kommt nicht oft vor, dass wir im wirklichen Leben solche schönen runden Zahlen haben, aber ich denke, das zeigt gut, wie Flexbox funktioniert, wenn es darum geht, wie groß Dinge gemacht werden sollen.

Die Spalten gleich bekommen

Es gibt verschiedene Möglichkeiten, die drei Spalten, die wir wollen, gleich breit zu bekommen, aber einige sind besser als andere. Für alle Ansätze ist die Grundidee, dass wir die Basisgröße aller Spalten gleich machen wollen. Wenn sie eine gleiche Basisgröße haben, werden sie mit gleicher Rate schrumpfen (oder wachsen, wenn wir flex-grow verwenden), wenn Flexbox seine Flex-Sachen macht, und theoretisch sollten sie dadurch gleich groß sein.

Es gibt ein paar gängige Wege, dies zu tun, aber wie ich bei all dem herausgefunden habe, glaube ich inzwischen, dass diese Ansätze fehlerhaft sind. Schauen wir uns zwei der gängigsten Lösungen an, die ich in der Praxis sehe, und ich werde erklären, warum sie nicht funktionieren.

Methode 1: Verwenden von flex: 1

Eine Möglichkeit, die wir versuchen können, um allen Flex-Elementen die gleiche Basisgröße zu geben, ist die Deklaration von flex: 1 auf allen von ihnen

.flex-parent { display: flex; }
.flex-parent > * { flex: 1; }

In einem Tutorial, das ich einmal gemacht habe, habe ich einen anderen Ansatz gewählt, und ich muss 100 Leute gehabt haben, die gefragt haben, warum ich nicht stattdessen flex: 1 verwende. Ich habe geantwortet, dass ich nicht auf die flex-Kurzschreibweise eingehen möchte. Aber dann habe ich flex: 1 in einer neuen Demo verwendet, und zu meiner Überraschung hat es nicht funktioniert.

Die Spalten waren nicht gleich.

Die mittlere Spalte ist hier größer als die anderen beiden. Es ist nicht viel, aber das gesamte Designmuster, das ich erstelle, dient nur dazu, jedes Mal perfekt gleiche Spalten zu haben, unabhängig vom Inhalt.

Warum hat es also in dieser Situation nicht funktioniert? Der Schuldige hier ist das padding auf der Komponente in der mittleren Spalte.

Und vielleicht werden Sie sagen, dass es albern ist, einer der Elemente eine Auffüllung hinzuzufügen und anderen nicht, oder dass wir verschachteln können (darauf kommen wir noch). Meiner Meinung nach sollte ich jedoch in der Lage sein, ein Layout zu haben, das unabhängig vom Inhalt, den wir hineinlegen, funktioniert. Das Web handelt heutzutage von Komponenten, die wir plug-and-play können, schließlich.

Als ich das zum ersten Mal einrichtete, war ich sicher, dass es funktionieren würde, und dieses Problem zu sehen, brachte mich dazu, lernen zu wollen, was hier wirklich vor sich ging.

Die flex-Kurzschreibweise tut mehr, als nur flex-grow: 1 zu setzen. Wenn Sie es noch nicht wissen, ist flex die Kurzschreibweise für flex-grow, flex-shrink und flex-basis.

Die Standardwerte für diese einzelnen Eigenschaften sind

.selector {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

Ich werde flex-basis in diesem Artikel nicht vertiefen, da Robin das bereits gut getan hat. Vorerst können wir es uns wie width vorstellen, um die Dinge einfach zu halten, da wir nicht mit flex-direction spielen.

Wir haben bereits gesehen, wie flex-shrink funktioniert. flex-grow ist das Gegenteil. Wenn die Größe aller Flex-Elemente entlang der Hauptachse kleiner ist als das Elternelement, können sie wachsen, um diesen Platz auszufüllen.

Also standardmäßig Flex-Elemente

• wachsen nicht;
• wenn sie sonst das Elternelement überlaufen würden, dürfen sie schrumpfen;
• ihre Breite verhält sich wie max-content.

Zusammengenommen ist die flex-Kurzschreibweise standardmäßig

.selector {
  flex: 0 1 auto;
}

Das Lustige an der flex-Kurzschreibweise ist, dass man Werte weglassen kann. Wenn wir also flex: 1 deklarieren, wird der erste Wert, flex-grow, auf 1 gesetzt, was flex-grow im Grunde aktiviert.

Das Seltsame hier ist, was mit den weggelassenen Werten passiert. Man würde erwarten, dass sie bei ihren Standardwerten bleiben, aber das tun sie nicht. Bevor wir uns jedoch ansehen, was passiert, tauchen wir zuerst ein, was flex-grow überhaupt tut.

Wie wir gesehen haben, erlaubt flex-shrink Elementen zu schrumpfen, wenn ihre Basisgrößen zu einem berechneten Wert addiert werden, der größer ist als die verfügbare Breite des Elternelements. flex-grow ist das Gegenteil. Wenn die Gesamtsumme der Elementbasisgrößen kleiner ist als der Wert der Breite des Elternelements, dann wachsen sie, um den verfügbaren Platz auszufüllen.

Wenn wir dieses super einfache Beispiel nehmen, bei dem wir drei kleine divs nebeneinander haben und flex-grow: 1 hinzufügen, wachsen sie, um diesen verbleibenden Platz auszufüllen.

Aber wenn wir drei divs mit ungleichen Breiten haben – wie die, mit denen wir angefangen haben – bewirkt das Hinzufügen von flex-grow zu ihnen überhaupt nichts. Sie werden nicht wachsen, weil sie bereits den gesamten verfügbaren Platz einnehmen – so viel Platz, dass flex-shrink eingreifen und sie schrumpfen muss, um hineinzupassen!

Aber, wie Leute mich darauf hingewiesen haben, kann das Setzen von flex: 1 funktionieren, um gleiche Spalten zu erzeugen. Nun, mehr oder weniger, wie wir oben gesehen haben! In einfachen Situationen funktioniert es jedoch, wie Sie unten sehen können.

Wenn wir flex: 1 deklarieren, funktioniert es, weil es nicht nur flex-grow auf 1 setzt, sondern auch flex-basis ändert!

.selector {
  flex: 1;
  /* flex-grow: 1; */
  /* flex-shrink: 1; */
  /* flex-basis: 0%; Wait what? */
}

Ja, das Setzen von flex: 1 setzt flex-basis auf 0%. Dies überschreibt die intrinsische Größenbestimmung, die wir zuvor hatten und die sich wie max-content verhielt. Alle unsere Flex-Elemente wollen jetzt eine Basisgröße von 0 haben!

Ihre Basisgrößen sind also jetzt 0, aber wegen flex-grow können sie alle wachsen, um den leeren Platz auszufüllen. Und wirklich, in diesem Fall tut flex-shrink nichts mehr, da alle Flex-Elemente jetzt eine Breite von 0 haben und wachsen, um den verfügbaren Platz auszufüllen.

Genau wie im Schrumpfungsbeispiel zuvor nehmen wir den verfügbaren Platz und lassen alle Flex-Elemente mit gleicher Rate wachsen. Da sie alle eine Basisbreite von 0 haben, bedeutet das Wachsen mit gleicher Rate, dass der verfügbare Platz gleichmäßig zwischen ihnen aufgeteilt wird und sie alle die gleiche Endgröße haben!

Außer, wie wir gesehen haben, ist das nicht immer der Fall…

Der Grund dafür ist, dass Flexbox, wenn es all diese Dinge tut und den Platz verteilt, sei es beim Schrumpfen oder Wachsen eines Flex-Elements, die Inhaltsgröße des Elements betrachtet. Wenn Sie sich an das Box-Modell erinnern, haben wir die Inhaltsgröße selbst, dann außen herum padding, border und margin.

Und nein, ich habe * { box-sizing: border-box; } nicht vergessen.

Dies ist eine dieser seltsamen Eigenheiten von CSS, aber es ergibt Sinn. Wenn der Browser die Breite dieser Elemente betrachten und deren padding und borders in die Berechnungen einbeziehen würde, wie könnte er Dinge schrumpfen lassen? Entweder müsste das padding ebenfalls schrumpfen *oder* es würde zu Überläufen im Platz kommen. Beide Situationen sind schrecklich, also betrachtet der Browser anstatt der box-size von Elementen bei der Berechnung ihrer Basisgröße nur die content-box!

Das Setzen von flex: 1 verursacht also ein Problem in Fällen, in denen Sie borders oder padding auf einigen Ihrer Elemente haben. Ich habe jetzt drei Elemente, die eine Inhaltsgröße von 0 haben, aber mein mittleres hat ein Padding darauf. Wenn wir dieses Padding nicht hätten, hätten wir die gleiche Mathematik wie bei der Betrachtung, wie flex-shrink funktioniert.

Ein Elternelement von 600px und drei Flex-Elemente mit einer Breite von 0px. Sie alle haben flex-grow: 1, also wachsen sie mit gleicher Rate, und sie werden jeweils 200px breit. Aber das Padding vermasselt alles. Stattdessen habe ich drei divs mit einer Inhaltsgröße von 0, aber das mittlere hat padding: 1rem. Das bedeutet, es hat eine Inhaltsgröße von 0 plus 32px Padding.

Wir haben 600 - 32 = 568px, die gleichmäßig aufgeteilt werden müssen, anstatt 600px. Alle divs wollen mit gleicher Rate wachsen, also 568 / 3 = 189,3333px.

Und das ist es, was passiert!

Aber… denken Sie daran, das ist ihre Inhaltsgröße, nicht die Gesamtbreite! Das lässt uns mit zwei divs mit einer Breite von 189,333px und einer mit einer Breite von 189,333px + 32 = 221,333px zurück. Das ist ein ziemlich erheblicher Unterschied!

Methode 2: flex-basis: 100%

Ich habe das immer so gehandhabt

.flex-parent {
  display: flex;
}

.flex-parent > * {
  flex-basis: 100%;
}

Ich dachte, das würde am längsten funktionieren. Tatsächlich sollte dies meine endgültige Lösung sein, nachdem ich gezeigt hatte, dass flex: 1 nicht funktioniert. Aber während ich diesen Artikel schrieb, erkannte ich, dass er ebenfalls in das gleiche Problem fällt, aber es ist viel weniger offensichtlich. Genug, dass ich es mit meinen Augen nicht bemerkt habe.

Die Elemente versuchen alle, 100% Breite zu haben, was bedeutet, dass sie alle die Breite des Elternelements erreichen wollen, das, wieder einmal, 600px ist (und unter normalen Umständen oft viel größer ist, was den wahrnehmbaren Unterschied weiter reduziert).

Der Punkt ist, dass 100% das Padding in den berechneten Werten enthält (wegen * { box-size: border-box; }, das ich der Einfachheit halber in diesem Artikel für alle als vorhanden voraussetze). So erhalten die äußeren divs eine Inhaltsgröße von 600px, während die mittlere div eine Inhaltsgröße von 600 - 32 = 568px erhält.

Wenn der Browser daran arbeitet, den Platz gleichmäßig aufzuteilen, schaut er nicht darauf, wie er 1800px gleichmäßig auf 600px Platz quetschen kann, sondern wie er 1768px quetschen kann. Außerdem, wie wir bereits gesehen haben, schrumpfen Flex-Elemente nicht um den gleichen Betrag, sondern mit gleicher Geschwindigkeit! Das Element mit Padding schrumpft also insgesamt etwas weniger als die anderen.

Dies führt dazu, dass die .card eine Endbreite von 214,483px hat, während die anderen 192,75px erreichen. Wiederum führt dies zu ungleichen Breitenwerten, obwohl der Unterschied kleiner ist als bei der flex: 1-Lösung.

Warum CSS Grid hier die bessere Wahl ist

Obwohl all das ein wenig frustrierend (und sogar ein wenig verwirrend) ist, geschieht es aus einem guten Grund. Wenn sich Ränder, Abstände oder Rahmen bei Flexbox-Einbindung ändern würden, wäre das ein Albtraum.

Und vielleicht bedeutet dies, dass CSS Grid eine bessere Lösung für dieses wirklich häufige Designmuster sein könnte.

Ich dachte lange Zeit, dass Flexbox einfacher zu erlernen und anzuwenden ist als Grid, aber Grid gibt Ihnen langfristig mehr ultimative Kontrolle, ist aber viel schwieriger zu verstehen. Ich habe meine Meinung dazu kürzlich geändert und denke, dass Grid uns nicht nur bessere Kontrolle in dieser Art von Situation gibt, sondern auch intuitiver ist.

Normalerweise deklarieren wir bei der Verwendung von Grid unsere Spalten explizit mit grid-template-columns. Das müssen wir aber nicht. Wir können es durch die Verwendung von grid-auto-flow: column viel wie Flexbox verhalten lassen.

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Genau so erhalten wir das gleiche Verhalten wie beim Anwenden von display: flex. Wie bei flex können die Spalten potenziell unausgewogen sein, aber der Vorteil von Grid ist, dass das Elternelement die volle Kontrolle über alles hat. Anstatt dass der Inhalt der Elemente eine Auswirkung hat, wie es bei Flexbox der Fall wäre, benötigen wir nur eine weitere Zeile Code und können das Problem lösen.

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Ich liebe es, dass das alles auf dem Elternelement liegt und wir die Kinder nicht auswählen müssen, um das gewünschte Layout zu erhalten!

Das Interessante hier ist, wie fr-Einheiten funktionieren. Sie werden in der Spezifikation buchstäblich als „Flex-Einheiten“ bezeichnet und funktionieren wie Flexbox bei der Aufteilung von Platz. Der große Unterschied: Sie betrachten die anderen Spuren, um zu bestimmen, wie viel Platz sie haben, und ignorieren dabei den Inhalt dieser Spuren.

Das ist die eigentliche Magie hier. Indem wir grid-auto-columns: 1fr deklarieren, sagen wir im Wesentlichen: „Standardmäßig sollen alle meine Spalten eine gleiche Breite haben“, was wir von Anfang an wollten!

Aber was ist mit kleinen Bildschirmen?

Was ich an diesem Ansatz liebe, ist, dass wir ihn super einfach halten können.

.grid-container {
  display: grid;
  gap: 1em;
}

@media (min-width: 35em) {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Und so funktioniert es perfekt. Und indem wir display: grid von Anfang an deklarieren, können wir gap einbeziehen, um gleichmäßige Abstände beizubehalten, unabhängig davon, ob die Kinder Zeilen oder Spalten sind.

Ich finde dies auch viel intuitiver, als die flex-direction innerhalb einer Media Query zu ändern, um ein ähnliches Ergebnis zu erzielen. So sehr ich Flexbox liebe (und ich denke wirklich, dass es immer noch großartige Anwendungsfälle hat), die Tatsache, dass das Deklarieren von flex-direction: column Zeilen und umgekehrt Zeilen erzeugt, ist auf den ersten Blick etwas kontraintuitiv.

Und natürlich, wenn Sie es vorziehen, ohne Media Queries zu arbeiten, hindert Sie nichts daran, dies mit Hilfe von auto-fit auf die nächste Stufe zu heben, was dem Einrichten von etwas mit flex-wrap ähnlich wäre (wenn auch nicht genau dasselbe).

.grid-container {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(10em, 25em));
}

Es mit Flexbox zum Laufen bringen

Ich erkenne, dass wir dies mit Flexbox umgehen können, indem wir das Element mit dem padding verschachteln. Das haben wir getan, seit wir begonnen haben, Layouts mit Floats zu erstellen, und Bootstrap hat uns dieses Designmuster wirklich eingehämmert.

<div class="container">
  <div class="row">
    <div class="col"> <div class="">... </div>
    <div class="col"> <div class="element-with-padding">...</div> </div>
    <div class="col"> ... </div>
  </div>
</div>

Und es ist nichts Falsches daran. Es funktioniert! Aber Floats funktionieren auch, und wir haben aufgehört, sie für Layouts zu verwenden, da in den letzten Jahren bessere Lösungen veröffentlicht wurden.

Einer der Gründe, warum ich Grid *liebe*, ist, dass wir unsere Markup-Struktur erheblich vereinfachen können. So wie wir Floats für eine bessere Lösung aufgegeben haben, möchte ich zumindest, dass die Leute offen dafür sind, dass Grid vielleicht eine bessere und intuitivere Lösung für diese Art von Designmuster sein könnte.

Flexbox hat natürlich immer noch seinen Platz

Ich liebe Flexbox immer noch, aber ich denke, seine wahre Stärke liegt in Zeiten, in denen wir uns auf die intrinsische Breite der Flex-Elemente verlassen wollen, wie bei Navigationen oder Gruppen von Elementen, wie Schaltflächen oder anderen Elementen unterschiedlicher Breite, die nebeneinander gehen sollen.

In diesen Situationen ist dieses Verhalten ein Vorteil, der Dinge wie gleichmäßige Abstände zwischen ungleichen Elementen so einfach macht! Flexbox ist wunderbar, und ich habe nicht vor, es nicht mehr zu verwenden.

In anderen Situationen hingegen, wenn Sie mit der Funktionsweise von Flexbox kämpfen, könnten Sie vielleicht stattdessen zu Grid greifen, auch wenn es kein typisches „2D“-Grid ist, für das man es verwenden sollte.

Leute sagen mir oft, dass sie Schwierigkeiten haben, Grid zu verstehen, weil es zu kompliziert ist, und obwohl es das sein *kann*, wie wir hier gesehen haben, muss es das nicht sein.