Justify-content-Ausrichtung (Attributname in RN: justifyContent) auf der Hauptachse
Die Ausrichtung von align-items (Attributname in RN: alignItems) auf der Querachse
Wenn in React Native die Hauptachsenrichtung des Containers nicht festgelegt ist, lautet die Standardrichtung der Container-Hauptachse: flexDrection: 'column', dh wenn die Hauptachse unseres Containers in vertikaler Richtung angeordnet ist Wir können das FlexDirection-Attribut weglassen
1. Was ist das FlexBox-Layout?
Flexbox ist die Abkürzung für Flexible Box, was „elastisches Layout“ bedeutet und verwendet wird, um dem Box-Modell maximale Flexibilität zu bieten. Elemente, die ein flexibles Layout verwenden, werden als Flex-Container oder kurz „Container“ bezeichnet. Alle seine untergeordneten Elemente werden automatisch zu Mitgliedern des Containers, die als Flex-Elemente (Flex-Element) oder kurz „Elemente“ bezeichnet werden.
Das Folgende ist ein Beispieldiagramm des FlexBox-Teleskoplayouts:
Flex-Container haben standardmäßig zwei Achsen:
Die Hauptachse in horizontaler Richtung und die Querachse in senkrechter Richtung zur Hauptachse.
Die Anordnungsrichtung der Hauptachse ist von links nach rechts und die Anordnungsrichtung der Querachse ist von oben nach unten. Die Elementelemente im Flex-Container sind standardmäßig nach der Richtung der Hauptachse sortiert. Das Element belegt Der Raum auf der Hauptachse wird als Hauptgröße bezeichnet, und das Element nimmt die Querachse ein. Der Raum wird als Quergröße bezeichnet
2. Hauptsächlich verwendete Flex-Container-Eigenschaften:
1.flex-direction (Attributname in RN: flexDirection)
- Spalte: Die Hauptachse ist vertikal und der Startpunkt liegt am oberen Rand
- Spaltenumkehr: Die Hauptachse ist vertikal und der Startpunkt befindet sich unten
- Zeile: Die Hauptachse ist horizontal und der Startpunkt befindet sich am linken Ende
- Zeilenumkehr: Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende
Hinweis: Wenn in React Native die Hauptachsenrichtung des Containers nicht festgelegt ist, lautet die Standardrichtung der Hauptachse des Containers: flexDrection: 'column', dh wenn die Hauptachse unseres Containers in vertikaler Richtung angeordnet ist Dann können wir das FlexDirection-Attribut weglassen
2.flex-wrap (Attributname in RN: flexWrap)
Standardmäßig sind die Item-Elemente im Container auf einer Achse angeordnet, und das Flex-Wrap-Attribut definiert, dass, wenn nicht alle Item-Elemente auf einer Achse angeordnet werden können, sie in neuen Zeilen angeordnet werden können
- neue Zeile umbrechen
- Nowrap wird nicht umgebrochen
- wrap-reverse Umbricht die erste Zeile unten
3. justify-content (Attributname in RN: justifyContent) Ausrichtung auf der Hauptachse
- Flex-Start (Standard): linksbündig
- Flex-Ende: rechte Ausrichtung
- Mitte: zentriert
- Abstand zwischen: Beide Enden sind ausgerichtet und die Abstände zwischen den Elementen sind gleich
- space-around: Der Abstand auf beiden Seiten jedes Elements ist gleich. Der Abstand zwischen Elementen ist doppelt so groß wie der Abstand zwischen Elementen und Rändern
4. Die Ausrichtung von align-items (Attributname in RN: alignItems) auf der Querachse
- Flex-Start: (Standard) Der Startpunkt der Querachse wird ausgerichtet
- Flex-Ende: Richten Sie das Ende der Querachse aus
- Mitte: Richten Sie den Mittelpunkt der Querachse aus
- Grundlinie: die Grundlinienausrichtung der ersten Textzeile im Element
- Dehnung: Wenn die Höhe des Elements nicht festgelegt oder auf „Automatisch“ eingestellt ist, nimmt es die Höhe des gesamten Containers ein
3. Hauptsächlich verwendetes Artikelattribut (Artikel).
1.flex
Verwenden Sie Flex: 1 in RN: Wenn nur ein Element Flex: 1 verwendet, füllt dieses Element den gesamten Bildschirm. Wenn mehrere Elemente Flex: 1 verwenden, teilen die mehreren Elemente den Bildschirmraum gleichmäßig auf
2.alignSelf Die Querachsenausrichtung des Elements selbst
Mit Ausnahme des Hinzufügens eines automatischen Attributs sind die anderen genau die gleichen wie das align-items-Attribut. Die spezifische Ausrichtung hängt mit der Richtung der Querachse zusammen. Im Folgenden wird davon ausgegangen, dass die Richtung der Querachse von oben nach unten verläuft
- Flex-Start: (Standard) Der Startpunkt der Querachse wird ausgerichtet
- Flex-Ende: Richten Sie das Ende der Querachse aus
- Mitte: Richten Sie den Mittelpunkt der Querachse aus
- Grundlinie: die Grundlinienausrichtung der ersten Textzeile im Element
- Dehnung: Wenn die Höhe des Elements nicht festgelegt oder auf „Automatisch“ eingestellt ist, nimmt es die Höhe des gesamten Containers ein
Überschreiben Sie Alignitems, um den Unterschied zum eigenen Steuerelement zu definieren
Referenzlink: