Flex ist ein elastisches Layout.
Jeder Container kann als Flex-Layout festgelegt werden.
.box{display: flex}
Inline-Elemente können das Flex-Layout verwenden
.box{display: inline-flex}
Browser mit Webkit-Kernel müssen das Präfix -webkit hinzufügen.
.box{display:-webkit-flex; display:flex;🎜>Hinweis: Nachdem ein Element auf das Flex-Layout eingestellt wurde, sind die Attribute „float“, „clear“ und „vertikal-align“ der untergeordneten Elemente ungültig.
Grundkonzept:
Ein Element, das das Flex-Layout verwendet, wird als Flex-Container bezeichnet, und alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, die als Flex
-Elemente bezeichnet werden.
Der Container verfügt standardmäßig über zwei Achsen, die horizontale Hauptachse und die vertikale Querachse. Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart bezeichnet, und die Endposition wird als Hauptende bezeichnet.
Die Startposition der Querachse wird als Querstart bezeichnet, die Endposition wird als Querstart bezeichnet , und die technische Position wird als Querende bezeichnet.
Einzelprojekt Der belegte Hauptachsenraum wird als Hauptgröße und der belegte Querachsenraum als Quergröße bezeichnet.
Containerattribute:
Für den Container sind 6 Attribute festgelegt.
flex-direction flex-wrap flex-flow justify-content
align-items align-content
1.flex-direction
Das Attribut bestimmt die Richtung der Hauptachse (d. h. die Anordnungsrichtung von die Elemente)
.box{flex-direction:row |. row-reverse;}
row (Standardwert) ist die Hauptachse horizontal und der Startpunkt ist 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.
Spaltenumkehr: Die Hauptachse ist vertikal und der Startpunkt liegt am unteren Rand.
2. Flex-Wrap-Attribut
Standardmäßig werden Elemente auf einer Linie (auch Achse genannt) angeordnet. Das Flex-Wrap-Attribut definiert, wie die Linie umbrochen wird, wenn eine Achsenlinie
nicht angeordnet werden kann.
.box{flex-wrap: nowrap |. wrap-reverse;}
nowrap (Standard): Kein Zeilenumbruch.
Zeilenumbruch: Zeilenumbruch, erste Zeile oben.
Wrap-Reverse: Wrap-Reverse, mit der ersten Zeile darunter.
3.flex-flow
Das Flex-Flow-Attribut ist die Abkürzung des Flex-Direction-Attributs und des Flex-Wrap-Attributs. Der Standardwert ist row nowrap.
.box{ flex-flow:< ;flex-direction> ; ||. ; DUQuatch in] 4.justify-content-Attribut
Das Attribut definiert die Ausrichtung des Elements auf der Hauptseite Achse.
.box{justify-content: flex-start | Darunter ist die Hauptachse die Slave-Achse von links nach rechts.
Flex-Start (Standard): linksbündig
Flex-End rechtsbündig
Mitte zentriert
Leerzeichen dazwischen: ausgerichtete Elemente Die Abstände dazwischen sind alle gleich.
Leerzeichen: Jedes Element hat auf beiden Seiten den gleichen Abstand, sodass der Abstand zwischen den Elementen doppelt so groß ist wie der Abstand zwischen den Elementen und dem Rand.
5.align-items
Das Attribut definiert, wie die Elemente auf der Querachse ausgerichtet sind.
.box{align-items: flex-start |. flex-end |. Die spezifische Ausrichtung bezieht sich auf die Richtung der Querachse Die Querachse verläuft von oben nach unten.
Flex-Start: Richten Sie den Startpunkt der Querachse aus.
flex-end: Richten Sie den Endpunkt der Querachse aus.
Mitte: Richten Sie den Mittelpunkt des Schnittpunkts aus.
Grundlinie: Die Grundlinienausrichtung der ersten Textzeile des Elements.
stretch (Standardwert) Wenn das Element keine Höhe festlegt oder automatisch eingestellt wird, nimmt es die gesamte Höhe des Containers ein.
6.align-content-Attribut
Das Attribut definiert die Ausrichtung mehrerer Achsen. Wenn das Projekt nur eine Achse haben kann, hat dieses Attribut keine Auswirkung.
.box{align-content: flex-start |.
Flex-Start: Ausgerichtet auf den Startpunkt der Querachse.
Flex-Ende: am Endpunkt der Querachse ausgerichtet.
Mitte: Ausgerichtet am Mittelpunkt der Querachse.
Abstand zwischen den beiden Enden der Querachse, und die Abstände zwischen den Achsen sind gleichmäßig verteilt.
Raum-um: Der Raum auf beiden Seiten jeder Achse ist gleich.
Strecken (Standardwert): Die Achse nimmt die gesamte Querachse ein.
Projekteigenschaften
Sie können 6 Eigenschaften für das Projekt festlegen.
Flex-Grow Flex-Shrink Flex-Basis Flex Align-Self bestellen
1.order-Attribut
order-Attribut definiert die Sortierreihenfolge der Elemente. Je höher der kleinste Wert, desto höher ist der Standardwert. -grow-Attribut
Flex-grow-Attribut definiert das Vergrößerungsverhältnis von Der Standardwert ist 0, d. h. wenn noch Platz vorhanden ist, wird er auch vergrößert.
.item { flex-grow: ;}
Wenn alle Elemente ein Flex-Grow-Attribut von 1 haben, umschließen sie den verbleibenden Raum. Wenn das Flex-Grow-Attribut eines Elements 1 ist 2. Wenn Alle anderen Elemente sind 1. Ersteres nimmt doppelt so viel verbleibenden Platz ein wie andere Elemente.
3.Flex-Shrink-Attribut
Das Flex-Shrink-Attribut definiert das Verkleinerungsverhältnis des Elements. Der Standardwert ist 1, dh es ist nicht genügend Platz vorhanden und das Element wird verkleinert.
.item{flex-shrink:
;} Wenn die Flex-Shrink-Eigenschaft aller Elemente 1 ist und nicht genügend Platz vorhanden ist, werden sie alle proportional verkleinert.
Wenn das Flex-Shrink-Attribut eines Elements o ist und die anderen Elemente 1 sind, wird ersteres
nicht verkleinert, wenn nicht genügend Platz vorhanden ist. Negative Werte sind für diese Eigenschaft nicht gültig.
4. Flex-Basis-Attribut
CraftUi sollte eingelegt werden. 🎜>ob auf der Hauptachse überschüssiger Platz vorhanden ist. Der Standardwert ist auto, was der Originalgröße des Projekts entspricht.
.item {flex-basis: |}
5.flex-Attribut
Das Flex-Attribut ist die Abkürzung für Flex-Shrink und Flex und Flex-Basis. Die beiden letztgenannten Attribute sind optional.
.item { flex:none |. [<'flex-grow'> <'flex-shrink'>] Es gibt zwei Verknüpfungswerte: auto (1 1 auto) und none (0 0 auto).
Leiten Sie die relevanten Werte über drei separate Attribute ab. Der Standardwert ist auto, was bedeutet, dass das align-items-Attribut geerbt wird des übergeordneten Elements
🎜> Dieses Attribut kann 6 Werte annehmen, außer auto, die anderen sind genau die gleichen wie das align-items-Attribut.
Mehr Flex-Layouts – um verwandte Artikel zu lesen, achten Sie bitte auf die chinesische PHP-Website!
