Eine visuelle Anleitung zu CSS Flexbox

Was ist CSS Flexbox?

Gemäß den MDN-Webdokumenten:

„Das flexible CSS-Box-Layout ist ein CSS-Modul, das ein für das Design der Benutzeroberfläche optimiertes CSS-Box-Modell und das Layout von Elementen in einer Dimension definiert. Im Flex-Layout-Modell können die untergeordneten Elemente eines Flex-Containers in eine beliebige Richtung ausgelegt werden und ihre Größen „biegen“, indem sie entweder wachsen, um nicht genutzten Raum zu füllen, oder schrumpfen, um ein Überlaufen der Eltern zu vermeiden. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann leicht manipuliert werden. “

Zusammenfassend ist es also ein Layoutmodul, das das Ausrichten und Verteilen von Speicherplatz auf Elemente in einem Container erleichtert.

Lassen Sie uns einen kurzen Blick auf einige Beispiele werfen, wie mit CSS flexbox mit nur 1–2 Codezeilen gearbeitet werden kann:

Horizontales Ausrichtungslayout:

Vertikales Ausrichtungslayout:

Es ist ziemlich cool, da nur ein oder zwei Zeilen CSS erforderlich waren, um das Layout in jedem Container zu bearbeiten.

Die Grundlagen

Flexbox-Eigenschaften können in zwei Haupttypen eingeteilt werden:

  1. Containereigenschaften (Flex-Richtung, Flex-Wrap, Begründen von Inhalten, Ausrichten von Elementen, Ausrichten von Inhalten)
  2. Eigenschaften von Flex-Elementen (Reihenfolge, Flex, Flex-Grow, Flex-Shrink, Align-Self)

Anzeige: flex

Die erste Eigenschaft ist nicht spezifisch für Flexbox. Diese Eigenschaft displaysetzen wir auf den Wert : flex. Dies wird für den Container festgelegt, der die Elemente enthält, die wir bearbeiten möchten.

Fügen wir einige Bilder hinzu, um zu verstehen, wie es funktioniert:

Wenn wir anfänglich einen Container haben, in dem sich 3 Kisten ( div) befinden. So werden sie aussehen:

Fügen wir flexnun dem Container hinzu:

Nur eine Zeile CSS hat das Layout von einer vertikalen in eine horizontale Richtung geändert.

Wichtige Terminologien rund um Flexbox

Diese Terminologien werden in diesem Handbuch verwendet.

  1. Flex Container: Dies bezieht sich auf den Container, der darauf display: flex;eingestellt ist.
  2. Flex-Element: Dies sind die einzelnen untergeordneten Elemente im Flex-Container
  3. Hauptachse : Standardmäßig wird von links nach rechts eingestellt.
  4. Querachse : Standardmäßig wird von oben nach unten eingestellt.

Sobald sie display: flexauf einen Container gesetzt sind, werden diese imaginären Achsen zusammenarbeiten, um zu bestimmen, wie sich die Flex-Elemente im Flex-Container bewegen und verhalten sollen. Diese beiden Achsen ändern ihre Richtung, wenn wir bestimmte Flexbox-Eigenschaften ändern, die unten erläutert werden.

Flex-Richtung

Diese Eigenschaft bestimmt die Richtung der imaginären Achsen. Die Achsen bestimmen wiederum, wie die Elemente im Flex-Container platziert werden sollen. Es werden die folgenden 4 Werte angenommen:

  1. rowist der Standardwert der Hauptachse, der von links nach rechts zeigt. Die Querachse bleibt von oben nach unten.
  2. row-reversekehrt die Richtung der Reihe von rechts nach links um. Auch hier bleibt die Querachse unberührt.

3. columnÄndert die Hauptachse von der horizontalen zur vertikalen Achse. Dies bedeutet, dass die Hauptachse jetzt von oben nach unten fließt, während die Querachse jetzt von links nach rechts fließt.

4. column-reverseähnelt dem Spaltenwert mit dem einzigen Unterschied, dass die Hauptachse jetzt von unten nach oben fließt.

Flex-Wrap

Der Flex-Container erlaubt standardmäßig nicht, dass Elemente mehrere Zeilen hintereinander einnehmen. Stattdessen werden alle Elemente so gequetscht, dass sie in eine Reihe passen. Das heißt, es ist nicht möglich, mehrere Zeilen einzuwickeln.

  1. flex-wrap: no-wrap ist die Standardeinstellung.

2 flex-wrap: wrap.. Durch Ändern dieser Eigenschaft in wrapkönnen wir jetzt sicherstellen, dass jedes Flex-Element seine jeweilige Größe behält. Wenn sie nicht in eine Zeile passen, werden sie abhängig von der Flexrichtung in eine nächste Zeile oder Spalte umgebrochen.

Wenn die Flex-Richtung auf Zeilenumkehr eingestellt wurde, werden die Elemente von rechts nach links in die nächste Zeile verschoben.

3. wrap-reverseAuf der anderen Seite wird die nächste Reihe von Flex-Elementen über der ersten Reihe von links nach rechts gewickelt.

Inhalt begründen

Diese Eigenschaft wird sehr oft verwendet. Sein Zweck ist es, den Raum zwischen Flex-Elementen in einem Flex-Container entlang der Hauptachse zu verteilen . Der Standardwert ist festgelegt flex-start.

Denken Sie daran: Wenn die Flexrichtung auf Spalte eingestellt wurde, fließt die Hauptachse jetzt von oben nach unten. Dies bedeutet, dass der Rechtfertigungsinhalt die Elemente jetzt vertikal verteilt.

Elemente ausrichten

Diese Eigenschaft ist genauso beliebt wie justify-contentund wird regelmäßig mit Flexbox verwendet. Es macht dasselbe wie justify-contentmit dem einzigen Unterschied, dass es entlang der Querachse funktioniert . Der Standardwert für align-itemsist stretch.

Denken Sie daran: Wenn die Biegerichtung auf Spalte eingestellt wurde, fließt die Querachse jetzt von links nach rechts. Dies bedeutet, dass Ausrichtungselemente die Elemente jetzt horizontal verteilen würden.

Inhalt ausrichten

Diese Eigenschaft ähnelt und kann leicht mit verwechselt werden align-items. Mit dieser Eigenschaft soll festgelegt werden, wie der Abstand zwischen den Zeilen in einem Flex-Container entlang der Querachse verteilt werden soll .

Während der align-itemsAbstand zwischen Flex-Elementen festgelegt wird, werden align-contentZeilen zwischen den Elementen als Ziel festgelegt. Der Standardwert für align-contentist stretch.

Eigenschaften von Flex-Elementen

Es ist Zeit, mit der zweiten Art von Flexbox-Eigenschaften fortzufahren, mit der wir die einzelnen Elemente in einem Flex-Container gezielt einsetzen können.

Sich ausrichten

Mit dieser Eigenschaft können Sie ein einzelnes Flex-Element entlang der Querachse ausrichten . Es überschreibt die Ausrichtung, die für den Container festgelegt wurde align-items.

Es hat auch die gleichen Eigenschaften wie align-items(siehe oben).

Auftrag

Diese Eigenschaft ermöglicht es uns, die Positionen einzelner Flex-Artikel innerhalb ihres Flex-Containers neu zu ordnen. Standardmäßig ist allen Elementen der Wert 0 zugewiesen.

Durch Zuweisen eines Werts niedriger (-ve) oder größer (+ ve) orderfür die einzelnen Elemente wird dieses bestimmte Element entsprechend seinen Werten positioniert.

Die Reihenfolge folgt der logischsten Konvention, nämlich -ve, 0, + ve. Die niedrigste Zahl geht ganz links und die größte ganz rechts, vorausgesetzt, alles andere ist als Standard festgelegt. Wenn Elemente vorhanden sind, denen kein neuer Wert zugewiesen wurde, bleiben sie 0.

Hinweis: Die Felder 1, 2, 5 und 6 im obigen Beispiel haben immer noch den Standardwert 0. Zur Verdeutlichung haben die sechs Felder oben die folgenden Werte: -1, 0, 0, 0, 0, 1 .

Wenn Sie eine Box vor Box Nummer 4 platzieren möchten, müssen Sie Ihre Zielbox auf eine Reihenfolge von -2 oder weniger einstellen.

Flex-Basis, Flex-Grow und Flex-Shrink

Bisher waren alle Flex-Items gleich groß. Schauen wir uns nun an, wie wir dafür sorgen können, dass ein bestimmtes Flex-Element mehr Platz in einem Flex-Container einnimmt als die anderen Elemente in demselben Container.

Flex-Basis

Diese Eigenschaft gibt die ideale Größe eines Flex-Elements an, bevor es in einen Flex-Container gelegt wird. Es funktioniert ähnlich wie die Breite beim Arbeiten mit Zeilen. Es funktioniert wie Höhe, wenn Sie mit Spalten arbeiten. Wenn wir also mit Spalten arbeiten und einem Element sowohl Höhe als auch Flex-Basis zugewiesen wurden, hat die Flex-Basis Vorrang, da dies die ideale Höhe ist, die ein Flex-Element einnimmt, wenn genügend Platz verfügbar ist.

Davon abgesehen, wenn nicht genügend Platz vorhanden ist und den Elementen keine Höhe oder Breite zugewiesen ist. Die Artikel nehmen die im Container verfügbare maximale Höhe oder Breite an.

Flex-Grow

Diese Eigenschaft bestimmt, wie die Flex-Elemente wachsen können, um den nicht verwendeten Platz in einem Flex-Container auszufüllen.

Wenn wir flex-grow: 1allen Feldern ein zuweisen , nehmen sie alle den verbleibenden Platz gleichmäßig ein, was auch der Standardwert ist. Die Nummer kann beliebig sein, solange sie alle dieselbe Nummer sind.

Wenn wir flex-grow: 1einem Element geben und einem zweiten ein a geben flex-grow: 2, nimmt das zweite Element doppelt so viel ungenutzten Platz ein wie das erste.

Dies gilt sowohl für Zeilen als auch für Spalten.

Flex-Shrink

Diese Eigenschaft bestimmt, wie die Flex-Elemente verkleinert werden können, wenn in einem Flex-Container nicht genügend Platz vorhanden ist.

Dies flex-shrink: 1ist der Standardwert. Dies bedeutet, dass alle Elemente standardmäßig mit derselben Geschwindigkeit verkleinert werden.

Hinweis:flex-shrink: 0; bedeutet, dass dieser bestimmte Artikel niemals schrumpfen sollte.

flex-shrink: 2; bedeutet, dass dieser bestimmte Artikel schneller schrumpfen sollte als die anderen bei flex-shrink: 1;

Biegen

Dies ist die Kurzversion für Flex-Grow, Flex-Shrink und Flex-Basis in dieser bestimmten Reihenfolge.

Wenn Sie alle drei oben genannten verwenden müssen, können Sie einfach Folgendes verwenden:

flex: 0 2 200px; Dabei bezieht sich 0 auf das Flex-Grow, 2 auf das Flex-Shrink und 200px auf die Flex-Basis.

Herzliche Glückwünsche!

Das ist es! Dies sind die Schlüsselzutaten, um ein Flex-Meister zu werden. Und wie bei allen anderen Dingen im Leben und im Code macht Übung den Meister. Ich empfehle dringend, diesen Leitfaden in die Praxis umzusetzen, um ein praktisches Verständnis zu erlangen. Ein Beispiel könnte sein, mit etwas Kleinem wie einer einfachen Navigationsleiste zu beginnen.

Sie können auch den Link zu meiner Codepen-Sammlung auf Flex-Box überprüfen, mit dem ich diese Flexboxen in den obigen Bildern erstellt habe, und sie optimieren, um zu sehen, wie sie sich ändern.

Vielen Dank, dass Sie diesen Leitfaden zur Flexbox gelesen haben. Ich hoffe, dass es hilfreich und informativ war. Wenn Sie Fragen haben oder Ihre Gedanken zu diesem Thema teilen möchten, wenden Sie sich bitte an den Kommentarbereich oder per E-Mail an [email protected]

Wenn Sie diese Lektüre als wertvoll empfunden haben, zeigen Sie diesem Artikel etwas Liebe, indem Sie einige Klatschen zurücklassen, damit auch andere Entwickler sie finden können.

ZeeshaanMaudar - Übersicht

Code zum Spaß Code zur Abwechslung Code für das soziale Wohl - ZeeshaanMaudar github.com