Flexbox -Containereigenschaften in CSS | Erklärt
In diesem Artikel werden die folgenden Aspekte eines CSS-Flexbox-Containers abdeckt:
- Was ist ein Flexbox -Behälter?
- Flexbox -Containereigenschaften in CSS
- So implementieren Sie Flexbox -Containereigenschaften in CSS?
So lass uns anfangen!
Was ist ein Flexbox -Behälter
Der Flex -Behälter ist ein Box/Container, der zahlreiche Flex -Elemente enthalten kann, wie in der folgenden Abbildung gezeigt:
Der dunkelblaue Bereich repräsentiert einen Flexbehälter im obigen Snippet, während der hellblaue Bereich Flexgegenstände darstellt.
Flexbox -Containereigenschaften in CSS
CSS liefern zahlreiche Flexbox-Containereigenschaften, die für verschiedene Zwecke verwendet werden können, wie in den untergegebenen Tabellen beschrieben:
| Eigenschaften | Beschreibung |
|---|---|
| Anzeige | Bestimmt die Art des Flex -Behälters I.e. Inline, Block. |
| Flex-Richtung | Gibt die Richtung der Elemente innerhalb des Containers wie Zeile, Zeilen-Umkehr usw. an. |
| Flex-Wrap | Bestimmt das Verpackungsverhalten von Flexbox -Elementen i.e. Wickeln oder nicht. |
| Flex-Fluss | Bietet die Funktionen sowohl der Flex-Wrap- als auch der Flex-Richtung. |
| Flex-Fluss | Bietet die Funktionen sowohl der Flex-Wrap- als auch der Flex-Richtung. |
| Rechtfertigungsbekämpfung | Es richtet die Flexbox -Elemente entlang der Hauptachse aus. |
| Ausrichtung | Es richtet die Elemente entlang der Kreuzachse aus. |
| Ausrichtung | Es richtet die Linien des Flexbehälters aus. |
| Lücke | Steuert die Räume zwischen den Flex -Elementen explizit. |
Flex-Richtung-Eigenschaft in CSS
CSS 3 liefert a Flex-Richtung Eigenschaft, die verwendet werden kann, um die Richtung der Elemente im Flexbox -Container anzugeben. Verwendung der Flex-Richtung Eigenschaft, wir können die Richtung des Elements von Oberfläche, unten, links und rechts links angeben.
Syntax
Der folgende Snippet bietet die grundlegende Syntax der CSS-Flex-Regisseur-Eigenschaft:
Flex-Richtung: Reihe | Säule | Zeilenumneuverzweigung | Säule-Umkehr;Die im obigen Snippet beschriebenen Werte können verwendet werden.
Flex-Wrap-Eigenschaft in CSS
Um die Elemente des Flexbox -Containers zu wickeln Flex-Wrap Eigenschaft kann verwendet werden. Es kann einen von zwei Werten dauern i.e. wickeln oder Nowrap. Angeben "wickeln" Wert wickelt die Elemente des Flexbox -Containers ein. Allerdings die "Nowrap" Der Wert wird verwendet, wenn Sie die Elemente des Flexbox -Containers nicht einwickeln möchten.
Syntax
Der folgende Snippet bietet die grundlegende Syntax von CSS Flex-Wrap-Eigenschaft:
Flex-Wrap: Wrap | Nowrap | Wrap-Reverse;Die im obigen Snippet beschriebenen Werte geben an, ob die Flex-Elemente in umgekehrter Reihenfolge umwickeln, nicht wrap oder wickeln.
Flex-Flow-Eigenschaft in CSS
Der Flex-Fluss Eigenschaft kann verwendet werden, um die Funktionen beider zu nutzen Flex-Richtung Und Flex-Wrap Eigenschaften.
Syntax
Der folgende Snippet bietet die grundlegende Syntax von CSS Flex-Flow-Eigenschaft:
Flex-Flow: Flex-Richtung Flex-Wrap;Begründung in CSS in der Intensivierung in CSS
Es wird verwendet, um die Elemente des Behälters in verschiedene Richtungen wie Start, Ende, Mitte usw. auszurichten.
Syntax
Der folgende Snippet bietet die grundlegende Syntax von CSS-Justify-Content-Eigenschaft:
Justify-Incontent: Center | Flex-Start | Flex-Ende | Weltraum zwischen | Weltraum-gleiche | Raumfahrt;Die Werte für Mitte, Flexstarts und Flex-End werden verwendet, um die Flex-Elemente in der Mitte, Start und Ende des Behälters zu positionieren. Der Speicherwert zwischen dem Platz gibt den Speicherplatz zwischen den Flex-Elementen an. Der Platz für den Raum und den Wert gibt den gleichen Raum um die Flex-Elemente, während der Raum-Around den Platz vor, zwischen und nach den Flex-Elementen angibt.
Ausrichtung des Eigentums in CSS
Der Standardwert dieser Eigenschaft ist Streck.
Syntax
Der folgende Snippet zeigt, welche Werte die Eigenschaft aus Align-items benötigen kann:
Align-Items: Stretch | Flex-Start | Mitte | Flex-Ende | Grundlinie;Die Werte für Flex-Start-, Mitte und Flex-End-Werte werden verwendet, um die Elemente an Start, Mitte und am Ende des Containers zu positionieren, während der Basiswert die Flex-Elemente an der Basislinie des Containers positioniert.
Ausrichtung in die Eigenschaft in CSS
Es wird verwendet, um die Flex -Linien auszurichten, und sein Standardwert beträgt Dehnung.
Syntax
Der folgende Snippet zeigt die grundlegende Syntax der Eigenschaft aus Align-Incontent:
Ausrichtung in Kontent: Stretch | Flex-Start | Mitte | Flex-Ende | Weltraum-| Weltraum zwischen;GAP -Eigentum in CSS
Steuert die Räume zwischen den Flex -Elementen explizit. Es gibt die Größe des Lückens zwischen Spalten und Zeilen an.
Syntax
Der folgende Snippet zeigt die grundlegende Syntax der Eigenschaft aus Align-Incontent:
GAP: Zeilen-Lack-Spalten-Lücke;Die oben gegebenen Werte legt die Größe der Lücke zwischen Zeilen bzw. Spalten fest.
So implementieren Sie Flexbox -Containereigenschaften in CSS
In diesem Abschnitt werden wir die oben beschriebenen theoretischen Konzepte praktisch implementieren.
Beispiel
In diesem Beispiel werden wir Anzeigen-, Ausrichtungs-, Flex-Regisseur- und Gap-Eigenschaften implementieren:
Flexbox -Behälter
Erster Gegenstand
Zweiter Artikel
Dritter Artikel
Vierter Artikel
Fünfter Artikel
Der folgende Snippet zeigt die jeweilige Ausgabe für das obige Code -Snippet an:
Die oben gegebene Ausgabe authentifiziert die Arbeit von Flexbox-Containereigenschaften.
Abschluss
Der Flex -Behälter ist ein Box/Container, der zahlreiche Flexgegenstände enthalten kann. CSS bietet zahlreiche Flexbox -Containereigenschaften, die für verschiedene Zwecke verwendet werden können. Beispielsweise bestimmt die Anzeigeeigenschaft den Typ des Flex -Containers. Die Eigenschaft Flex-Regisseur gibt die Richtung der Elemente im Container an, wie z. In diesem Schreiben werden eine vollständige Anleitung für Flexbox-Containereigenschaften, ihre Syntax und die Verwendung in CSS vorgestellt.