Flex -Behälter in CSS | Erklärt

Das Flexbox -Layoutmodell bietet eine effiziente und dynamische Anordnung von Elementen, indem sie in einen Container mit gleichem verteiltem Raum platziert werden. In diesem Layout reagieren Elemente, was bedeutet, dass die Elemente ihr Verhalten entsprechend der Art von Gerät ändern, die sie anzeigen. Es besteht aus zwei Komponenten, deren Flex -Container und Flex -Elemente sind. Hier werden wir jedoch nur Flexbehälter betonen. Probanden diskutiert sind.

1. Was ist ein Flexbehälter
2. Flex -Behältereigenschaften

Was ist ein Flexbehälter?

Dies ist eine Komponente einer Flexbox, die die Eigenschaften des Vorfahrelements definiert, indem er seine Anzeige auf Flex oder Inline-Flex festlegt.

Die mit dem Flex -Behälter verbundenen Eigenschaften werden hier erklärt.

Flex -Behältereigenschaften

Eigenschaften im Zusammenhang mit einem Flex -Behälter.

1. Flex-Richtung-Eigenschaft
2. Flex-Wrap-Eigenschaft
3. Flex-Flow-Eigenschaft
4. Begründung von Rechtfertigungen
5. Eigentum ausgerichtet
6. Eigenschaft ausgerichtet

Diese Eigenschaften werden unten ausführlich erläutert.

Flex-Richtung-Eigenschaft

Um die Richtung der in einer Flexbox vorhandenen Elemente festlegen, wird die Eigenschaft Flex-Richtung verwendet.

Syntax

Flex-Richtung: Reihe | Reihen-Umkehr | Spalte | Säulen -REVERSUSE | initial | erben;

Parameter erklärt

Reihe: Dieser Standardwert ordnet die Elemente horizontal an.

Reihenresver: Dieser Wert platziert Elemente in einer Reihe, aber mit einer umgekehrten Richtung.

Spalte: Es arrangiert die Gegenstände vertikal.

Säulenrahlung: Es arrangiert die Elemente in einer Spalte, aber in umgekehrter Weise.

Beispiel

Das folgende Beispiel zeigt die Funktionsweise der Eigenschaft Flex-Richtung.

Html

Gegenstand 1
Punkt 2
Punkt 3
Punkt 4

Hier haben wir vier Div -Behälter in einem größeren Div -Behälter verschachtelt und ihm eine Klasse „Flexbox“ zugewiesen.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Flex-Richtung: Reihen-Umkehr;

Im obigen Code zeigen wir die größere DIV als Flex-Behälter an und geben ihm etwas Farbe, und zuletzt ist seine Richtung auf Reihen-Umkehr eingestellt.

CSS

.flexbox div
Hintergrundfarbe: Lightgrey;
Breite: 150px;
Rand: 15px;
Polsterung: 20px;
Schriftgröße: 35px;

Jetzt stylen wir unsere Gegenstände im Container mit verschiedenen CSS -Eigenschaften.

Ausgang

Die Flex-Elemente werden in derselben Reihe gelegt, aber in umgekehrter Reihenfolge.

Flex-Wrap-Eigenschaft

Diese Eigenschaft besagt, ob die Elemente um die Flex -Linie gewickelt werden sollten oder nicht.

Syntax

Flex-Wrap: Nowrap | Wrap | Wrap-Reverse | initial | erben;

Parameter erklärt

Nowrap: Dieser Standardwert wickelt keine Elemente ein.

wickeln: Es wickelt die Elemente bei Bedarf ein.

Wrap-REASVERS: Es wickelt die Elemente bei Bedarf aber umgekehrt um.

Beispiel

Hier erfahren Sie. Um die Auswirkungen dieser Eigenschaft zu sehen, müssen Sie das Browserfenster ändern.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Flex-Wrap: Wrap;

Im obigen Code haben wir die Flex-Wrap-Eigenschaft auf Wickeln gesetzt. Dieser Wert wickelt die Elemente in einen Container ein.

CSS

.flexbox div
Hintergrundfarbe: Lightgrey;
Breite: 150px;
Rand: 15px;
Polsterung: 20px;
Schriftgröße: 35px;

Mit einigen grundlegenden CSS haben wir unsere Flex -Artikel gestylt.

Ausgang

Die Flex -Gegenstände wurden verpackt.

Flex-Flow-Eigenschaft

Es gibt die Richtung der Elemente an, während angegeben wird, ob Elemente einwickelt werden sollen oder nicht. Dies ist eine Abkürzungseigenschaft für die Durchführung von Durchfluss und zur Flussschreibe.

Syntax

Flex-Flow: Durchflussreflexions-Wrap | initial | erben;

Parameter erklärt

Durchflussrichtung: Es definiert die Richtung der Elemente.

Flussschreibe: Es heißt, ob die Elemente verpackt werden sollten oder nicht.

Beispiel

Betrachten Sie das folgende Beispiel, um die Arbeit dieser Eigenschaft zu verstehen.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Flex-Flow: Row-Reverse-Wrack;

Mit der Eigenschaft von Shorthand haben wir die Richtung der Flex-Elemente als zeilenweit eingestellt, während wir sie mit dem Wrap-Wert einwickelt haben.

Ausgang

Die Gegenstände wurden umgekehrt in Reihen gewickelt.

Begründung von Rechtfertigungen

Wenn die Elemente in einer Flexbox den horizontalen Raum nicht vollständig verbrauchen.

Syntax

Justify-Incontent: Flex-Start | Flex-Ende | Mitte | Weltraum zwischen | Raumfahrt | Weltraum-gleiche | initial | erben;

Parameter erklärt

Flex-Start: Es positioniert Elemente zu Beginn des Containers und ist der Standardwert.

Flex-Ende: Dies platziert die Elemente am Ende des Behälters.

Center: Dies positioniert die Elemente in der Mitte des Behälters.

Weltraum dazwischen: Es fügt Platz zwischen Elementen hinzu.

Raumfahrt: Es fügt vor, zwischen und nach jedem Element Räume hinzu.

Weltraum: Dies gibt jedem Element gleiche Räume.

Beispiel

Angenommen, Sie möchten Ihren Inhalt bis zum Ende des Flex -Containers rechtfertigen.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Justify-Incontent: Flex-End;

Der Flex-End-Wert positioniert alle Flex-Elemente am Ende des Containers.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Eigentum ausgerichtet

Diese Eigenschaft legt die Anordnung von Elementen in einem Container vertikal fest.

Syntax

Align-Items: Stretch | Mitte | Flex-Start | Flex-Ende | Grundlinie | initial | erben;

Parameter erklärt

strecken: Es ist ein Standardwert, der die Elemente in den Container ausdehnt.

Center: Dies positioniert die Elemente in der Mitte des Behälters.

Flex-Start: Es positioniert Elemente zu Beginn des Containers und ist der Standardwert.

Flex-Ende: Dies platziert die Elemente am Ende des Behälters.

Grundlinie: Dies positioniert die Elemente an der Grundlinie des Containers.

Beispiel

Hier demonstrieren wir den Mittelwert der Eigenschaft aus Align-items.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Höhe: 200px;
Ausrichtung: Zentrum;

Um diese Eigenschaft ordnungsgemäß zu demonstrieren, bieten wir dem Flex-Behälter eine gewisse Höhe.

Ausgang

Die Gegenstände wurden vertikal in der Mitte des Behälters ausgerichtet.

Eigenschaft ausgerichtet

Es verändert das Verhalten der Eigenschaft Flex-Wrap.

Syntax

Ausrichtung in Kontent: Flex-Start | Flex-Ende | Mitte | Weltraum zwischen | Raumfahrt | Weltraum-gleiche | initial | erben;

Parameter erklärt

Flex-Start: Es positioniert Elemente zu Beginn des Containers und ist der Standardwert.

Flex-Ende: Dies platziert die Elemente am Ende des Behälters.

Center: Dies positioniert die Elemente in der Mitte des Behälters.

Weltraum dazwischen: Es fügt Platz zwischen Elementen hinzu.

Raumfahrt: Es fügt vor, zwischen und nach jedem Element Räume hinzu.

Weltraum: Dies gibt jedem Element gleiche Räume.

Beispiel

Um zu verstehen, wie die Eigenschaft ausgerichtet ist, die Eigenschaften in der Intensivität funktioniert.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Höhe: 300px;
Flex-Wrap: Wrap;
Ausrichtung in der Intentität: Raumfahrt;

Hier haben wir die Höhe des Behälters weiter erhöht, damit Sie diese Eigenschaft besser verstehen können. Zuletzt haben wir die Eigenschaft aus Align-In-Incontent den Raum-Around-Wert zugewiesen.

Ausgang

Der Platz um jeden Gegenstand wurde vertikal erfolgreich hinzugefügt.

Abschluss

Flex-Container, der eine Komponente einer Flexbox ist. CSS liefert viele Eigenschaften, die mit dem Flex -Behälter verbunden sind und verwendet werden können, um die Eigenschaften des Flex -Behälters zu definieren. Nur wenige der mit dem Flex -Container verbundenen Eigenschaften sind; Flex-Richtung, Ausrichtung, Ausrichtung, Flex-Flow usw. Jede dieser Eigenschaften wird ausführlich zusammen mit relevanten Beispielen erläutert.