Ein solides Verständnis von Flexbox und CSS Grid ist erforderlich, wenn Sie beeindruckende, reaktionsschnelle Websites erstellen möchten.
Wenn Sie schon längere Zeit CSS schreiben, stehen die Chancen gut, dass Sie zumindest schon einmal von diesen Begriffen gehört haben. Möglicherweise haben Sie sogar einen oder beide bis zu einem gewissen Grad verwendet. Sie sind beide leistungsstarke Teile von CSS mit ähnlichen, aber subtil unterschiedlichen Anwendungsfällen.
Was ist Flexbox?
Flexbox ist eine eindimensionale CSS-Layoutmethode, die es schon seit einiger Zeit gibt. Sie können sich Flexbox als eine Reihe verwandter CSS-Eigenschaften vorstellen, mit denen Sie HTML-Elemente in einem Container ausrichten und den Abstand zwischen ihnen verwalten können.
Vor Flexbox erforderte diese Art von Layout eine frustrierende und unhandliche Verwendung des Schwimmers und Positionseigenschaften.
Wenn Sie sich Sorgen um die Browserunterstützung für Flexbox machen, seien Sie nicht besorgt. Entsprechend caniuse.com, unterstützen alle modernen Browser Flexbox.
Die Grundlagen von Flexbox
Während Flexbox enthält viele CSS-Eigenschaften, die Grundlagen sind ziemlich einfach. Die Verwendung von Flexbox beginnt immer mit der Deklaration eines übergeordneten Containers als Flex-Container durch Hinzufügen Anzeige: flex zu seinen Stilregeln. Dadurch werden automatisch alle untergeordneten Elemente dieses Elements zu Flex-Items.
Danach können Sie die Raumverteilung innerhalb des Flex-Containers mit steuern Justify-Content-Eigenschaft. Sie können die Ausrichtung von Flex-Elementen mit steuern Ausrichtungselemente Eigentum.
Hier ist ein Codebeispiel, das Flexbox verwendet, um den Platz in einem Container gleichmäßig zwischen seinen Kindern zu verteilen und sie alle in der Mitte des Containers auszurichten. Dies ist der HTML-Code:
<div-Klasse="Container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Das ist das CSS:
.Container {
Anzeige: Flex;
Breite: 100 %;
rechtfertigen-Inhalt: Raum herum;
Ausrichtungselemente: Mitte;
Rand: 1px durchgehend schwarz;
Höhe: 200px;
}
.Container > div {
Höhe: 100px;
Breite: 100px;
Hintergrundfarbe: rot;
Farbe weiß;
Schriftgröße: 5rem;
Textausrichtung: Mitte;
Randradius: 5px;
}
Und hier ist die Ausgabe:
Was ist CSS-Grid?
CSS Grid ist ein Layoutsystem, das Flexbox ergänzt. Flexbox ist leistungsfähig, aber für bestimmte Arten von Layouts nicht sehr geeignet. Der Versuch, die Struktur einer ganzen Seite mit Flexbox zu gestalten, wird am Ende zu einer frustrierenden Aufgabe mit hässlichem, nicht-sematischem Markup und hackigem CSS.
CSS Grid ist kein Flexbox-Ersatz, sondern eher ein alternatives System für manche Situationen.
Die Unterstützung für CSS Grid ist nicht ganz so umfangreich wie für Flexbox, aber Grid ist es halbwegs gut unterstützt im Jahr 2022.
Die Grundlagen von CSS Grid
Das Konzept von Grid ist einfach. Wie der Name schon sagt, können Sie mit CSS Grid den Platz in einem übergeordneten Container in ein Zeilen- und Spaltenraster mit einer beliebigen Anzahl von Zeilen/Spalten unterteilen. Danach geben Sie die Position der untergeordneten Elemente an, indem Sie auf die Linien des übergeordneten Gitters verweisen.
Beginnen Sie mit dem Hinzufügen Anzeige: Raster zum übergeordneten Container. Dann nutzen Sie die Grid-Template-Zeilen Und Grid-Template-Spalten Eigenschaften, um die Zeilen und Spalten anzugeben, in die Sie das Raster aufteilen möchten. Sie können dann die verwenden Grid-Spalte Und Gitterreihe Eigenschaften auf den untergeordneten Elementen, um ihnen mitzuteilen, wo sie sich im Raster befinden sollen. Schauen wir uns ein Grid-Beispiel an, das das Fünf-Elemente-Setup von vorher verwendet, aber in einer komplizierteren Anordnung.
Hier ist der HTML-Code:
<div-Klasse="Container">
<div>1</div>
<div-Klasse="zwei">2</div>
<div-Klasse="drei">3</div>
<div-Klasse="vier">4</div>
<div-Klasse="fünf">5</div>
</div>Hier ist das CSS:
.Container {
Anzeige: Raster;
Breite: 100 %;
Raster-Schablonen-Reihen: Wiederholung (3, 1fr);
Grid-Template-Columns: Repeat (3, 1fr);
Lücke: 0.5 Rest;
Rand: 1px durchgehend schwarz;
Höhe: 300px;
}.Container > div {
Hintergrundfarbe: rot;
Farbe weiß;
Schriftgröße: 5rem;
Textausrichtung: Mitte;
Randradius: 5px;
}
.Container > .zwei {
Gitterreihe: 2;
Gitterspalte: 2;
}
Hier ist die Ausgabe:
CSS Grid enthält auch eine Menge von andere Eigenschaften, die Sie verwenden können, um komplexere Layouts zu erstellen.
Welche sollten Sie verwenden?
Zunächst ist es wichtig zu beachten, dass Sie nichts davon abhält, Flexbox und Grid zusammen zu verwenden, und in einigen Fällen ist dies die optimale Wahl. Lassen Sie uns jedoch die Frage beantworten, für welche Layouts jedes dieser Systeme am besten geeignet ist.
Flexbox eignet sich am besten zum Erstellen von Layouts, bei denen Elemente auf einer einzigen Linie ausgerichtet und verteilt werden müssen. Beispiele für diese Art des Layouts sind das Ausrichten von Symbolen am Ende eines Abschnitts oder das Anordnen der Links in einer Navigationsleiste.
Grid hingegen leuchtet am hellsten, wenn Sie Elemente relativ zu anderen präzise positionieren müssen (sowohl horizontal als auch vertikal), und Sie benötigen diese Positionierung, um sich problemlos an verschiedene Bildschirmgrößen anzupassen.
Zur Veranschaulichung ist hier der Code, den Sie schreiben müssten, um das Layout aus dem Grid-Beispiel mit Flexbox neu zu erstellen.
Der HTML-Code:
<div-Klasse="Container">
<div-Klasse="unter eins">
<div>1</div>
<div>5</div>
</div><div-Klasse="Sub zwei">
<div>2</div>
</div>
<div-Klasse="Unter drei">
<div>4</div>
<div>3</div>
</div>
</div>
Das CSS:
.Container {
Rand: 1px durchgehend schwarz;
Höhe: 300px;
}... {
Anzeige: Flex;
Breite: 100 %;
}.eins, .drei {
Rechtfertigungsinhalt: Zwischenraum
}.zwei {
justify-content: center;
}
... > div {
Höhe: 100px;
Breite: 100px;
Hintergrundfarbe: rot;
Farbe weiß;
Schriftgröße: 5rem;
Textausrichtung: Mitte;
Randradius: 5px;
}
Und hier ist die Ausgabe:
Das Wichtigste, was hier zu beachten ist, ist, dass dieser Code zwar dieselbe Ausgabe wie das Grid-Beispiel erzeugt, das Markup hier jedoch erheblich komplizierter ist. Die Implementierung dieses Layouts erfordert untergeordnete Container, und Sie müssen die nummerierten Divs im Markup in der falschen Reihenfolge platzieren.
Nehmen Sie außerdem an, Sie müssten dieses Layout in eine ungünstige Position verschieben: Sagen Sie, das 5. Div mit dem 2. auszurichten. Wenn Sie dafür Flexbox verwendet hätten, müssten Sie darauf zurückgreifen Position: relativ oder etwas ähnliches. Mit Grid brauchen Sie nur die zu verschieben Grid-Spalte Eigentum.
Aber im Gegensatz dazu würde die Implementierung der einfachen Einzelzeilenausrichtung aus dem Flexbox-Beispiel mit Grid zu viel mehr CSS führen. Grid ist offensichtlich weniger geeignet für diese Art von Layout.
Während Flexbox und Grid größtenteils die Effekte des jeweils anderen replizieren können, gibt es einige Ausnahmen. Das Überlappen von Elementen ist nur mit Flexbox ziemlich schwierig, aber mit Grid sehr einfach. Grid erlaubt auch nicht, dass sich Elemente mit margin: auto von anderen Elementen wegdrücken, wie es Flexbox tut.
Flexbox und Grid sind leistungsstarke Layoutsysteme
Flexbox und CSS Grid sind beides Designsysteme, die das Layout Ihrer Webseiteninhalte vereinfachen. Grid eignet sich am besten für zweidimensionale Layouts mit vielen Elementen, die relativ zueinander genau positioniert werden müssen. Flexbox eignet sich besser für eindimensionale oder einzeilige Layouts, bei denen Sie nur eine Reihe von Elementen auf eine bestimmte Weise platzieren müssen.