Was ist Flex und ein ausführliches Tutorial zur Flex-Layout-Syntax

Flexibles Layout

Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet. Es wird verwendet, um dem Boxmodell maximale Flexibilität zu verleihen und die Anordnung der Elemente (Elemente) im Container frei zu steuern.

Jeder Container kann als Flex-Layout angegeben werden.

.Kasten{ 
      Anzeige: Flex;
 }

Inline-Elemente können auch Flex-Layout verwenden.

 .Kasten{  
      Anzeige: Inline-Flex; 
  }

Webkit-basierte Browser müssen das Präfix -webkit haben.

.Kasten{
  Anzeige: -webkit-flex; /* Safari */
  Anzeige: Flex;
}

Beachten Sie, dass nach der Einstellung auf Flex-Layout die Eigenschaften „Float“, „Clear“ und „Vertical-Align“ der untergeordneten Elemente ungültig werden.

Konzept

Elemente, die das Flex-Layout verwenden, werden Flex-Container oder kurz „Container“ genannt. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, sogenannten Flex-Elementen oder kurz „Elementen“.

Standardmäßig hat ein Container zwei Achsen: die horizontale Hauptachse und die vertikale Querachse. Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart und die Endposition als Hauptende bezeichnet; die Startposition der Querachse wird als Querstart und die Endposition als Querende bezeichnet.

Standardmäßig werden die Elemente entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Hauptachsenraum wird als Hauptgröße bezeichnet, und der eingenommene Querachsenraum wird als Quergröße bezeichnet.

Containereigenschaften

6 Eigenschaften von Containern

• Flexrichtung
• Flex-Wrap
• Flex-Flow
• Inhalt ausrichten
• Elemente ausrichten
• Inhalt ausrichten

1. Flex-Direction-Attribut

Die Eigenschaft „Flex-Direction“ bestimmt die Richtung der Hauptachse (also die Richtung, in der die Elemente angeordnet sind).

.Kasten {
  Flex-Richtung: Zeile | Zeile umkehren | Spalte | Spalte umkehren;
} 

Die möglichen Werte sind 4

• Zeile (Standard): Die Hauptachse ist horizontal, mit dem Startpunkt am linken Ende.
• Zeilenumbruch: Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende.
• Säule: Die Hauptachse ist vertikal, der Startpunkt befindet sich an der oberen Kante.
• column-reverse: Die Hauptachse ist vertikal und der Startpunkt liegt an der Unterkante.

2. Flex-Wrap-Eigenschaft

Standardmäßig werden Elemente auf einer Linie (auch „Achse“ genannt) angeordnet. Die Eigenschaft „Flex-Wrap“ definiert, wie der Umbruch erfolgt, wenn eine Achse nicht passt.

.Kasten{
  Flex-Wrap: Jetzt-Wrap | Wrap | Wrap-Reverse;
}

Es können drei Werte angenommen werden.

(1) nowrap (Standard): kein Zeilenumbruch.

(2) wrap: Wrap, mit der ersten Zeile oben.

(3) Wrap-Reverse: Die Zeile wird umgebrochen, wobei die erste Zeile unten steht.

3. Flex-Flow-Attribut

Die Eigenschaft „Flex-Flow“ ist eine Kurzform der Eigenschaften „Flex-Direction“ und „Flex-Wrap“. Der Standardwert lautet „Row Nowrap“.

.Kasten {
  Flex-Flow: <Flex-Richtung> || <Flex-Wrap>;
}

4. Justify-Content-Attribut

Die Eigenschaft „Justify-Content“ definiert, wie Elemente auf der Hauptachse ausgerichtet werden.

.Kasten {
    Inhalt ausrichten: Flex-Start | Flex-Ende | Mitte |
    Raum dazwischen | Raum drumherum;
} 

Es können 5 Werte vorhanden sein und die konkrete Ausrichtung hängt von der Richtung der Achse ab. Im Folgenden wird davon ausgegangen, dass die Hauptachse von links nach rechts verläuft.

• Flex-Start (Standard): linksbündig
• Flex-Ende: rechtsbündig
• Center:
• Abstand zwischen: Richten Sie beide Enden aus, und der Abstand zwischen den Elementen ist gleich.
• space-around: Jedes Element hat auf beiden Seiten gleich viel Platz. Daher ist der Abstand zwischen den Elementen doppelt so groß wie der Abstand zwischen den Elementen und dem Rand.

5. align-items-Attribut

Die Eigenschaft „align-items“ definiert, wie Elemente auf der Querachse ausgerichtet werden.

.Kasten {
  Elemente ausrichten: Flex-Start | Flex-Ende | Mitte | Grundlinie | Strecken;
} 

Es können 5 Werte vorhanden sein. Die spezifische Ausrichtungsmethode bezieht sich auf die Richtung der Querachse. Im Folgenden wird davon ausgegangen, dass die Querachse von oben nach unten verläuft.

• Flex-Start: Startpunkt der Querachse ausrichten. Flex-Ende: Richtet den Endpunkt der Querachse aus. Mitte: Richtet den Mittelpunkt der Querachse aus. Grundlinie:
• Die Grundlinienausrichtung der ersten Textzeile im Element. Strecken (Standard): Wenn für das Element keine Höhe festgelegt ist oder die Höhe auf „Automatisch“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.

6. align-content-Attribut

Die Eigenschaft „align-content“ definiert die Ausrichtung mehrerer Achsen. Wenn das Projekt nur eine Rasterlinie hat, ist diese Eigenschaft wirkungslos.

.Kasten {
  Inhalt ausrichten: Flex-Start | Flex-Ende | Mitte | Abstand dazwischen | Abstand drumherum | strecken;
} 

Dieses Attribut kann 6 Werte annehmen.

• Flex-Start: Am Startpunkt der Querachse ausrichten.
• Flex-Ende: Am Endpunkt der Querachse ausrichten.
• Mitte: Am Mittelpunkt der Querachse ausrichten.
• Abstand zwischen: An beiden Enden der Querachse ausrichten und die Abstände zwischen den Achsenlinien gleichmäßig verteilen.
• space-around: Der Abstand auf beiden Seiten jeder Achse ist gleich. Der Abstand der Achsen zueinander ist also doppelt so groß wie der Abstand der Achsen zum Rand.
• Strecken (Standard): Die Achsenlinie nimmt die gesamte Querachse ein.

Referenzdokument: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Zusammenfassen

Damit ist der Artikel über Flex und ein ausführliches Tutorial zur Flex-Layout-Syntax abgeschlossen. Weitere Informationen zur Flex-Layout-Syntax finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!