CSS Flexbox Eigenschaften | Erklärt

Eine reaktionsschnelle Website erfordert, dass Sie Elemente ihr Verhalten wie Breite, Höhe, Auflösung, Orientierung usw. gemäß dem Gerätetyp mithilfe der Website verändern lassen. CSS bietet bestimmte Einheiten, mit denen Sie eine reaktionsschnelle Website wie Medienabfragen, Gitter, Flexbox usw. erstellen können. Hier in diesem Artikel wird unser Schwerpunkt auf Flexbox und Eigenschaften liegen, die damit verbunden sind. Die in diesem Beitrag hervorgehobenen Probanden sind wie folgt.

1. Was ist Flexbox
2. Was ist ein Flexbehälter
3. Was ist ein Flexelement
4. Flexbox -Eigenschaften

Was ist Flexbox

Das Flexbox -Layoutmodell bietet eine effiziente und dynamische Anordnung von Elementen, indem sie in einen Container mit gleichem verteilten 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.

Eine Flexbox macht Elemente im Grunde flexibel und bietet ihnen eine angemessene Position und Symmetrie.
Es besteht aus zwei von zwei Komponenten, die Flex -Container sind, und Flex -Elemente. Beide Komponenten werden unten erläutert.

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.

Was ist ein Flexelement

Ein Flex -Element beschreibt die Eigenschaften der Nachfolgerelemente. Darüber hinaus können in einem Flex -Behälter zahlreiche Flex -Elemente vorhanden sein.

Nachdem wir ein gutes Verständnis für eine Flexbox und ihre Komponenten haben, werden wir verschiedene Eigenschaften untersuchen, die mit der Flexbox verbunden sind.

Flexbox -Eigenschaften

Im Folgenden haben wir die verschiedenen Eigenschaften, die mit einer Flexbox verknüpft sind.

Eigenschaft anzeigen

Um festzustellen, wie ein Element angezeigt wird, wird die Anzeigeeigenschaft verwendet.

Syntax

Anzeige: Flex;

Parameter erklärt

Flex: Dieser Wert zeigt ein Element als Flex -Behälter an.

Beispiel

Angenommen, Sie möchten, dass ein Div -Container als Flexbox angezeigt wird. So wird es gemacht.

Html

Um festzustellen, wie ein Element angezeigt wird, wird die Anzeigeeigenschaft verwendet.

Hier haben wir einen Div -Container generiert und ein Absatz wurde darin verschachtelt.

CSS

.Container
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;

Verwenden der Klasse, die dem Div -Element zugewiesen ist.

Ausgang

Die DIV wurde erfolgreich als Flexbox angezeigt.

Der Rest der Eigenschaften, die sich auf Flexbox beziehen. Wir werden beide Klassen getrennt besprechen.

Flex -Behältereigenschaften

Eigenschaften, die unter diese Kategorie fallen.

Flex-Richtung-Eigenschaft

Diese Eigenschaft wird verwendet, um die Richtung der in einer Flexbox vorhandenen Elemente zu beschreiben.

Syntax

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

Parameter erklärt

Reihe: Dieser Standardwert ordnet die Elemente horizontal an.
Reihen-Umkehr: Dieser Wert platziert Elemente in einer Reihe, jedoch mit einer umgekehrten Richtung.
Spalte: Es ordnet die Gegenstände vertikal an.
Säulen-Umkehr: Es ordnet die Elemente in einer Spalte, jedoch jedoch umgekehrt an.

Beispiel

Lassen Sie uns bestimmte Gegenstände in eine Flexbox mit einer Richtung „Zeile“ platzieren.

Html

Gegenstand 1
Punkt 2
Punkt 3
Punkt 4

Im obigen Code erstellen wir einen größeren Div -Container und nisten vier weitere Div -Container darin.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Flex-Richtung: Reihe;

Hier zeigen wir die größere DIV als Flexbehälter und geben ihm etwas Farbe, und zuletzt ist seine Richtung auf eine Reihe eingestellt.

CSS

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

Jetzt stylen wir unsere Elemente im Container mit grundlegenden CSS -Eigenschaften.

Ausgang

Die Gegenstände wurden in einer Reihe angeordnet.

Begründung von Rechtfertigungen

Wenn die Elemente in einer Flexbox den horizontalen Raum nicht vollständig verbrauchen, richtet diese Eigenschaft sie über die Hauptachse aus.

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 Containers.
Center: Dies positioniert die Elemente in der Mitte des Behälters.
Weltraum zwischen: Es fügt Platz zwischen Elementen hinzu.
Raumfahrt: Es fügt vor, zwischen und nach jedem Element Räume hinzu.
Weltraum-selbst: Dies gibt jedem Element gleiche Räume.

Beispiel

Angenommen, Sie möchten Ihren Inhalt in der Mitte des Flex -Containers rechtfertigen.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Justify-Content: Center;

Der Mittelwert positioniert alle Flex -Elemente in der Mitte des Behälters.

CSS

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

Unter Verwendung grundlegender CSS stylen wir die Elemente.

Ausgang

Die Gegenstände wurden erfolgreich in die Mitte platziert.

Eigentum ausgerichtet

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

Syntax

_stretch _ Center _ Flex-Start _ Flex-End _ Baseline _ Initial _ Erben

Parameter erklärt

strecken: Es ist ein Standardwert, der die Elemente für 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 Containers.
Grundlinie: Dies positioniert die Elemente an der Grundlinie des Containers.

Beispiel

Hier haben wir gezeigt, wie der Grundwert der Eigenschaft aus Align-items funktioniert.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Höhe: 200px;
Align-Items: Baseline;

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

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Flex-Wrap-Eigenschaft

Wenn auf einer einzelnen Flex -Linie nicht viel Platz gibt, entscheidet diese Eigenschaft, ob Elemente einwickelt werden sollen oder nicht.

Syntax

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

Parameter erklärt

Nowrap: Dieser Standardwert wickelt keine Elemente ein.
wickeln: Es umhüllt die Elemente bei Bedarf.
Wrap-Reverse: Es wickelt die Elemente bei Bedarf aber umgekehrt um.

Beispiel

Um diese Immobilie zu verstehen, konsultieren Sie das folgende Beispiel.

CSS

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

Im obigen Code haben wir die Flex-Wrap-Eigenschaft auf Wrap-Reverse gesetzt, was bedeutet.

Ausgang

Die Gegenstände wurden umgekehrt gewickelt.

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 Containers.
Center: Dies positioniert die Elemente in der Mitte des Behälters.
Weltraum zwischen: Es fügt Platz zwischen Elementen hinzu.
Raumfahrt: Es fügt vor, zwischen und nach jedem Element Räume hinzu.
Weltraum-selbst: Dies gibt jedem Element gleiche Räume.

Beispiel

Hier ist ein Beispiel für das zu diskutierte Eigentum.

CSS

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

Hier haben wir die Höhe des Behälters weiter erhöht, damit Sie diese Eigenschaft besser verstehen können. Darüber hinaus haben wir die Eigenschaft aus Align-In-Incontent den Platz zwischen dem Platz zugewiesen, der Platz zwischen den Elementen hinzufügt.

Ausgang

Der Platz zwischen den Gegenständen wurde erfolgreich hinzugefügt.

Flex-Flow-Eigenschaft

Es beschreibt die Richtung der Elemente und gibt an, ob Elemente einwickelt werden sollen oder nicht. Darüber hinaus handelt es sich um ein Kurzeigeneignis für das Follwoing.

1. Durchflussrichtung
2. Flussschreibe

Syntax

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

Parameter erklärt

Durchflussrichtung: Es definiert die Richtung der Elemente.
Flow-Wrap: 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: Säulenreuer;

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

Ausgang

Die Elemente wurden in eine Spalte gewickelt, jedoch in umgekehrter Reihenfolge.

Jetzt werden wir unsere nächste Kategorie diskutieren.

Flex Elementeigenschaften

Die Eigenschaften, die mit dem Flex -Element verbunden sind, sind wie folgt.

Eigenschaft bestellen

Es definiert die Reihenfolge eines Flexelements im Vergleich zu anderen in einer Flexbox vorhandenen Elementen.

Syntax

Bestellung: num | initial | erben;

Parameter erklärt

Num: Dieser Wert definiert die Reihenfolge eines Flexelements. Standardmäßig ist der Wert 0.

Beispiel

So setzen Sie die Reihenfolge der Elemente in Flexbox ein.

Html

Gegenstand 1
Punkt 2
Punkt 3
Punkt 4

Um diese Eigenschaft ordnungsgemäß zu verstehen, verweisen wir jedem verschachtelten Div einen Ausweis.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;
Höhe: 250px;

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

Hier zeigen wir zuerst den Div -Container als Flexbox an und bieten ihm eine gewisse Höhe, um die Funktionsweise dieser richtigen zu demonstrieren, und schließlich stylen wir unsere Flex -Elemente.

CSS

#Gegenstand 1
Ordnung: 4;

#item2
Ordnung: 1;

#item3
Ordnung: 2;

#item4
Ordnung: 3;

Mit diesen IDs zuweisen wir jedem Element eine Bestellung.

Ausgang

Die Elemente wurden in der zugewiesenen Reihenfolge platziert.

Ausrichten von Eigenschaften

Diese Eigenschaft wird verwendet, um die Positionierung von Elementen in einem Flex -Behälter zu definieren. Diese Eigenschaft überschreibt die Eigenschaft aus Align-items und wird für Flexelemente verwendet.

Syntax

Align-Self: Auto | Dehnung | Mitte | Flex-Start | Flex-Ende | Grundlinie | initial | erben;

Parameter erklärt

Auto: Dies ist ein Standardwert, der entweder Eigenschaften vom Vorfahren Container erbt oder wenn es keinen Vorfahrbehälter gibt, dehnt es das Element aus.
strecken: Es streckt die Gegenstände so, dass sie in den Behälter passen.
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 Containers.
Grundlinie: Dies positioniert die Elemente an der Grundlinie des Containers.

Beispiel

Betrachten Sie das folgende Beispiel unten.

CSS

#item2
Ausrichtung selbst: Zentrum;

#item3
Align-Self: Flex-Start;

Unter Verwendung der zugewiesenen IDs wurde Punkt 2 in der Mitte des Containers positioniert. Der Punkt 3 wurde jedoch zu Beginn des Containers platziert.

Ausgang

Beide Gegenstände wurden erfolgreich ausgerichtet.

Flex-Flow-Eigenschaft

Diese Eigenschaft beschreibt das Ausmaß, in dem ein Element relativ zu den anderen im Container vorhandenen Elementen wächst.

Syntax

Flex-Grow: Nummer | initial | erben;

Parameter erklärt

Nummer: Dieser Wert gibt das Ausmaß des Wachstums eines Elements an. Standardmäßig ist der Wert 0.

Beispiel

Angenommen, wir wollen nur einen Gegenstand in Bezug auf andere anbauen. So machst du es.

CSS

#item2
Flex-Frear: 10;

Wir setzen den Wert der Flex-Flex-Anbaus-Eigenschaft auf 10, was bedeutet, dass Punkt 2 im Vergleich zu anderen Elementen 10-mal größer ist.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Flex-Shrink-Eigenschaft

Diese Eigenschaft definiert das Ausmaß, in dem ein Element relativ zu den anderen im Container vorhandenen Elementen schrumpfen wird.

Syntax

Flex-Shrink: Nummer | initial | erben;

Parameter erklärt

Nummer: Es gibt an, inwieweit ein Element schrumpfen wird. Standardmäßig ist der Wert 0.

Beispiel

Hier ist ein Beispiel für diese Eigenschaft.

Html

1
2
3
4
5

Um die Arbeit dieser Eigenschaft zu verstehen, haben wir einen größeren DIV -Container erstellt und fünf weitere Div -Container im größeren verschachtelt. Darüber hinaus wurde jedem Div eine andere Hintergrundfarbe zugewiesen, damit das Konzept dieser Eigenschaft ordnungsgemäß nachgewiesen werden kann.

CSS

.Container
Anzeige: Flex;
Breite: 400px;
Höhe: 200px;

.Container div
Flex-Base: 100px;

Hier zeigen wir die größere DIV als Flexbox. Darüber hinaus geben wir ihm auch eine gewisse Breite und Höhe. Zuletzt setzen wir seine Flex-Base auf 100px, was die Startlänge eines Flexelements definiert.

CSS

.Artikel
Flex-Shrink: 4;

Verwenden der Klasse, die den letzten beiden Div-Containern zugewiesen ist.

Ausgang

Die Punkte 4 und 5 sind kleiner als der Rest der Artikel.

Flex-Base-Eigenschaft

Zum Zweck der Festlegung der Startlänge eines Flexelements wird diese Eigenschaft verwendet.

Syntax

Flex-Base: Auto | num | initial | erben;

Parameter erklärt

Auto: Es ist ein Standardwert, der ein Element mit der Länge entspricht, die der des Flex -Elements entspricht.
Num: Es gibt die ursprüngliche Länge eines Artikels an.

Beispiel

Nehmen wir an, Sie möchten einem Flex -Element eine anfängliche Länge geben. Wir haben gezeigt, wie es gemacht wird.

CSS

#item4
Flex-Base: 300px;

Wir setzen die Flex-Base von Punkt 4 bis 300 PX, was bedeutet, dass die ursprüngliche Länge des vierten Artikel 300px beträgt.

Ausgang

Die anfängliche Länge des dritten Elements wurde erfolgreich eingestellt.

Flex -Eigenschaft

Diese Eigenschaft setzt das Wachstum, die Schrumpfung und die Länge eines Artikels auf einmal ein

1. Flex-Wachstum
2. Flex-Shrink
3. Flex-Base

Syntax

Flex-Property: Flex-Flex-Flex-Shrink-Flex-Basis | initial | erben;

Parameter erklärt

Flex-Anbauteil: Es gibt das Wachstum des Flex -Elements in Bezug auf andere Elemente im Container an.
Flex-Shrink: Es gibt die Schrumpfung eines Artikels relativ zu anderen Gegenständen an
Flex-Base: Es liefert die Startlänge eines Artikels.

Beispiel

Wenden Sie sich an das folgende Beispiel, um die Flex -Eigenschaft zu verstehen.

CSS

#item2
Flex: 0 0 250px;

Der Punkt 2 wird weder wachsen noch schrumpfen, es wird jedoch eine Länge von 250px haben.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Abschluss

Die Eigenschaften, die mit Flexbox verbunden sind. Eigenschaften im Zusammenhang mit Flex -Behälter sind; Flex-Flow, Flex-Regisseur, Ausrichtung in Konten, Rechtfertigungsbekämpfung usw. In der Zwischenzeit sind Eigenschaften, die mit dem Flex -Element verknüpft sind. Ordnung, Flex-Anbaus, Flex-Base, Ausrichtung selbst usw. Alle diese Eigenschaften werden in diesem Tutorial zusammen mit relevanten Beispielen erörtert.