Flexbox -Containereigenschaften in CSS | Erklärt

Das Flexbox -Layout -Modell bietet eine Möglichkeit, reaktionsschnelle Websites zu entwerfen. Dadurch bietet es zahlreiche Eigenschaften von Flex -Container und Flexbox -Elementen. Um mit CSS Flexbox zu arbeiten, benötigen wir einen Container, in dem wir die FlexBox -Elemente platzieren und einen Flexbox -Container erstellen, die Anzeigeeigenschaft verwenden und ihren Wert als Inline -Flex oder Flex einstellen müssen. Darüber hinaus bietet CSS eine breite Palette von Flexbox -Behältereigenschaften, um das Verhalten eines Flexbox -Containers zu verändern.

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.