Flex Artikel in CSS | Erklärt

Flexbox ist ein Layoutmodell, das Elemente in einem Container dynamisch ausrichtet, indem sie gleichermaßen verteilt sind. Dieses Layout erweist sich als hilfreich, um Elemente reaktionsschnell zu machen, was bedeutet, dass die Elemente ihr Verhalten entsprechend der Art von Gerät ändern, die sie anzeigen. Dieses Modell besteht aus zwei Komponenten, deren Flex -Container und Flex -Elemente sind. Unser Fokus in diesem Artikel wird jedoch auf Flexbehältern liegen. Die in dieser Beschreibung diskutierten Probanden sind wie folgt.

1. Was ist ein Flexelement
2. Flex Elementeigenschaften

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.

Diese Elemente machen einige Eigenschaften, die im Folgenden ausführlich erklärt werden.

Flex Elementeigenschaften

Die folgenden Eigenschaften sind mit einem Flexelement verbunden.

Eigenschaft bestellen

Zur Definition der Reihenfolge eines Flexelements im Vergleich zu anderen in einer Flexbox vorhandenen Elementen wird die Auftragseigenschaft verwendet.

Syntax

Bestellung: num | initial | erben;

Parameter erklärt
num: Dieser Wert definiert die Reihenfolge eines Flex -Elements. Standardmäßig ist der Wert 0.

Beispiel
Hier ist ein Beispiel für die Order -Eigenschaft.

Html

Gegenstand 1
Punkt 2
Punkt 3
Punkt 4

Im obigen Code wurde ein Div -Container erstellt und vier weitere Divs wurden darin verschachtelt. Jedem der verschachtelten DIV wurde eine ID zugewiesen.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;

Hier wurde die größere DIV als Flex -Behälter angezeigt und hat einige Hintergrundfarbe zur Verfügung gestellt.

CSS

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

Wir stylen jetzt unsere Gegenstände im Flex -Behälter mit einigen grundlegenden CSS -Eigenschaften.

CSS

#Gegenstand 1
Ordnung: 4;

#item2
Ordnung: 1;

#item3
Ordnung: 2;

#item4
Ordnung: 3;

Im obigen Code verwenden wir die ID jedes Elements, um ihm eine gewisse Bestellung anzugeben.

Ausgang

Jeder Artikel wurde nach seiner Bestellung platziert.

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

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;

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

#Gegenstand 1
Flex-Wrow: 15;

Wir setzen den Wert der Flex-Anbaus-Eigenschaft auf 15. Punkt 1 ist im Vergleich zu anderen Artikeln 15 -mal größer.

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 Flex-Elements wird die Eigenschaft Flex-Basis verwendet.

Syntax

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

Parameter erklärt
Auto: Es ist ein Standardwert, der einem Element mit der Länge des Flexelements 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

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;

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

#item3
Flex-Base: 300px;

Wir setzen die Flex-Base von Punkt 3 bis 300 PX, was bedeutet, dass die ursprüngliche Länge des dritten Elements 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. Es ist eine Abkürzungseigenschaft für Flex-Wachstum, Flex-Shrink und Flex-Base.

Syntax

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

Parameter erklärt
Flex-Anbaus: Es gibt das Wachstum des Flex -Elements in Bezug auf andere Elemente im Container an.

Flex-Shrink: Es heißt die Schrumpfung eines Gegenstands relativ zu anderen Gegenständen

Flex-Base: Es liefert die Startlänge eines Artikels.

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

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;

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

#item2
Flex: 0 0 300px;

Unter Verwendung der Kurzeigenschaft wurde das Wachstum und die Schrumpfung des zweiten Elements auf 0 gesetzt, was bedeutet, dass dieses Element weder wächst noch schrumpfen wird, es wird jedoch eine Länge von 300px haben.

Ausgang

Die Eigenschaft funktioniert ordnungsgemäß.

Ausrichten von Eigenschaften

Zur Beschreibung der Anordnung von Gegenständen in einem Flex-Behälter wird die Eigenschaft aus dem Ausrichten 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 Vorfahrbehälter erbt oder wenn es keinen Vorfahrbehälter gibt, dehnt es das Element aus.

strecken: Es streckt die Gegenstände, die 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 Behälters.

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

Beispiel
Betrachten Sie das folgende Beispiel, um die Eigenschaft aus Align-Self zu verstehen.

CSS

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

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

Hier haben wir dem Flex -Container etwas Höhe zur Verfügung gestellt, um das Konzept dieser Eigenschaft klar zu zeigen.

CSS

#item2
Ausrichtung selbst: Flex-End;

#item3
Align-Self: Flex-Start;

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

Ausgang

Beide Elemente wurden unter Verwendung der Eigenschaft aus Align-Self unterschiedlich positioniert.

Abschluss

Ein Flex -Element ist eine Komponente einer Flexbox, die die Eigenschaften der Nachfolgerelemente definiert. Sie können zahlreiche Flexartikel in einem Flex -Behälter platzieren. Es gibt einige CSS-Eigenschaften, die mit diesen Elementen wie Reihenfolge, Ausrichtung, Flexwachstum, Flex usw. verbunden sind. Jedes dieser Rendern macht mehrere Werte und dient einem anderen Zweck, den wir mit Hilfe relevanter Beispiele demonstriert haben.