Flex ist die Abkürzung für „Flexible Box“, was als „flexibles Layout“ übersetzt wird. Es wird verwendet, um die maximale Flexibilität für das Box-Modell zu gewährleisten. Sie müssen lediglich „display:flex“ festlegen. ; Inline-Elemente können durch die Implementierung von „display:inline-flex“ festgelegt werden. Es ist zu beachten, dass die Attribute „float“, „clear“ und „vertikal-align“ der untergeordneten Elemente ungültig sind.
1. Grundkonzepte
Flex-Layout ist ein Layout-Modell, das oft als Flexbox bezeichnet wird. Nach der Verwendung von Flex-Layout bietet es leistungsstarke Funktionen zur Platzzuweisung und Ausrichtung für untergeordnete Elemente.
Zu den häufig verwendeten Layouts vor der Verwendung des Flex-Layouts gehören: Fluid-Layout, Floating-Layout, Positionierungslayout usw. Der Nachteil besteht darin, dass das untergeordnete Element seine Position im übergeordneten Element steuern und auch auf die Höhenreduzierung des übergeordneten Elements achten muss.
Der Vorteil von Flex besteht darin, unflexible Layoutformen zu vermeiden, mehr Layoutmodi zur Auswahl zu erstellen und Probleme wie Ausrichtung, Verteilung und Reaktionsfähigkeit von Unterelementen zu lösen. Der Nachteil besteht darin, dass es sich nur auf seinen eigenen Layoutmodus verlassen kann und bei geringfügigen Änderungen nicht geändert werden kann.
Elemente, die das Flex-Layout verwenden, werden Flex-Container oder kurz „Container“ genannt. Alle seine untergeordneten Elemente generieren automatisch Containermitglieder, sogenannte Flex-Elemente (Flex-Elemente), die als „Elemente“ bezeichnet werden.
Der Container verfügt standardmäßig über zwei Hauptachsen: die horizontale Hauptachse (Hauptachse) und die vertikale Querachse (Querachse). Die Startposition der Hauptachse (dh der Schnittpunkt der Grenzen) wird als Hauptstart bezeichnet Die Endposition wird als Hauptende bezeichnet. Die Startposition der Querachse wird als Queranfang und die Endposition als Querende bezeichnet. Standardmäßig werden Elemente entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Raum auf der Hauptachse wird als Hauptgröße bezeichnet, und der von einem einzelnen Element eingenommene Raum auf der Querachse wird als Quergröße bezeichnet.
Die folgenden Eigenschaften werden in CSS bereitgestellt, um das Flex-Layout zu implementieren:
Je nach Geltungsbereich können diese Eigenschaften in zwei Kategorien unterteilt werden: Containereigenschaften (Flex-Direction, Flex-Wrap, Flex-Flow, Justify-Content, Align-Items, Align-Content) und Elementeigenschaften (Order, Align-Self). , Flex, Flex-Grow, Flex-Shrink, Flex-Basis). Lassen Sie uns die Verwendung dieser Attribute vorstellen.
2. Containereigenschaften
(1) Flexrichtung : Geben Sie die Anordnungsrichtung der Unterelemente in der flexiblen Box an.
Optionale Werte für das Attribut sind wie folgt:
Die Eigenschaft „flex-direction“ bestimmt die Richtung der Hauptachse (d. h. die Anordnungsrichtung von Elementen);
.box{flex-direction:row|row-reverse|column|column-reverse;}Dieses Attribut hat 4 Werte
● Zeile (Standardwert): Die Hauptachse ist horizontal und der Startpunkt liegt am linken Ende.
●Zeilenumkehr: Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende;
●Spalte: Die Hauptachse ist vertikal und der Startpunkt liegt am oberen Rand.
●spaltenumgekehrt: Die Hauptachse ist vertikal und der Startpunkt liegt am unteren Rand;
Der obige Effekt ist in der folgenden Abbildung dargestellt:
(2) Flex-Wrap : Geben Sie die Umhüllungsmethode für Unterelemente in der flexiblen Box an.
Standardmäßig werden Elemente auf einer Linie (auch „Achse“ genannt) angeordnet. Das Flex-Wrap-Attribut definiert, wie die Linie umbrochen wird, wenn eine Achse nicht angeordnet werden kann.
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap (Standard): kein Zeilenumbruch, der Anordnungseffekt ist wie folgt:
● Wrap: Wrap, die erste Zeile befindet sich oben. Der Anordnungseffekt ist wie folgt:
●wrap-reverse: Umbruch, die erste Zeile befindet sich unten, der Anordnungseffekt ist wie folgt:
(3) Flex-Flow : Diese Eigenschaft wirkt auf den Flex-Box-Container und wird verwendet, um die Anordnungsrichtung und den Zeilenumbruch von Elementen im Container zu steuern. Diese Eigenschaft ist eine zusammengesetzte Eigenschaft, die aus Flex-Richtung und Flex-Wrap besteht.
.box{flex-flow:<flex-direction><flex-wrap>;}(4) justify-content : Dieses Attribut wirkt auf die Unterelemente im flexiblen Box-Container und wird verwendet, um die Verteilung der Unterelemente selbst in der Anordnungsrichtung zu steuern;
Die Eigenschaft „justify-content“ definiert die Ausrichtung des Elements auf der Hauptachse
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}Dieses Attribut hat 5 Werte:
● Flex-Start (Standardwert): linksbündig;
●Flex-Ende: rechtsbündig;
●center: zentriert;
●space-between: Richten Sie beide Enden aus und die Abstände zwischen den Elementen sind gleich.
●space-around: Der Abstand auf beiden Seiten jedes Elements ist gleich, sodass der Abstand zwischen den Elementen doppelt so groß ist wie der Abstand zwischen dem Element und dem Rand.
Der obige Effekt ist in der folgenden Abbildung dargestellt:
(5) align-items : Dieses Attribut wirkt auf den flexiblen Boxcontainer und wird verwendet, um die Ausrichtung aller Unterelemente in der flexiblen Box in vertikaler Richtung der Anordnungsrichtung zu steuern.
Die Eigenschaft align-item definiert, wie Elemente auf der Querachse ausgerichtet werden
.box{align-items:flex-start|flex-end|center|baseline|stretch;}Dieses Attribut hat 5 Werte. Die spezifische Ausrichtung hängt von der Richtung der Querachse ab. Es wird davon ausgegangen, dass die Querachse von oben nach unten verläuft:
●Flex-Start: Richten Sie den Startpunkt der Querachse aus;
●Flex-Ende: Richten Sie den Mittelpunkt der Querachse aus.
●Mitte: Richten Sie den Mittelpunkt der Querachse aus.
●Grundlinie: die Grundlinienausrichtung der ersten Textzeile des Elements;
●stretch (Standardwert): Wenn das Element keine Höhe festlegt oder auf „Auto“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein;
Der obige Effekt ist in der folgenden Abbildung dargestellt:
3. Projekteigenschaften
(1) Auftragsattribut
Das Attribut order wird verwendet, um die Reihenfolge festzulegen, in der Elemente im Container angezeigt werden. Sie können die Position des Elements im Container durch bestimmte Werte definieren.
Bestellung:Nummer;
Dabei ist Zahl die Position des Elements im Container und der Standardwert ist 0.
Beispiel:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; border:1pxsolidblack;}.flexdiv:nth-child(1){order:3;}.flexdiv:nth-child( 2){order:1;}.flexdiv:nth-child(3){order:2;}.flexdiv:nth-child(4){order:5;}.flexdiv:nth-child(5){order: 4;</style></head><body><div><div>A</div><div>B</div><div>C</div><div>D</div><div >E</div></div></body></html>Laufergebnisse:
(2) align-self-Attribut
Mit dem Attribut align- self können Sie für ein Element eine andere Ausrichtung festlegen als für andere Elemente. Dieses Attribut kann den Wert des Attributs align-items überschreiben. Optionale Werte für das align-self-Attribut sind wie folgt:
Beispiel:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{width: 60px;Höhe:60px;Rahmen:1 pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</div><div>B</ div><div>C</div><div>D</div><div>E</div></div></body></html>Laufergebnisse:
(3)Flex-Attribut
Das Flex-Attribut ist die Abkürzung der drei Attribute Flex-Grow, Flex-Shrink und Flex-Basis. Das Syntaxformat ist wie folgt:
flex:flex-growflex-shrinkflex-basis;
Die Parameterbeschreibung lautet wie folgt:
● Flex-Grow: (erforderlicher Parameter) eine Zahl, mit der der Wachstumsbetrag des Elements im Verhältnis zu anderen Elementen festgelegt wird. Der Standardwert ist 0.
●flex-shrink: (optionaler Parameter) eine Zahl, mit der die Schrumpfung eines Elements im Verhältnis zu anderen Elementen festgelegt wird. Der Standardwert ist 1;
●Flex-Basis: (optionaler Parameter) Die Länge des Elements. Zulässige Werte sind „Auto“ (Standardwert, was auf „Automatisch“ hinweist), „Inherit“ (was bedeutet, dass der Wert dieses Attributs vom übergeordneten Element geerbt wird) oder „Addieren“, px, em usw. auf einen bestimmten Wert Die Form der Einheit.
Darüber hinaus verfügt das Flex-Attribut über zwei Verknüpfungswerte, nämlich auto (1 1 auto) und none (0 0 auto).
Der Beispielcode lautet wie folgt:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height: 60px;border:1pxsolidblack;}.f lexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>Laufergebnisse:
