FlexBox

FlexBox ist ein Container, in dem Elemente in einer Richtung angeordnet werden. Sie kann die Größe von Elementen anpassen, sie umbrechen, ausrichten und den Platz zwischen ihnen verteilen, um den verfügbaren Platz optimal zu nutzen. Es ist ein nützliches Layout für Elemente unterschiedlicher Größe und für die Größenänderung von Elementen, wenn sich der verfügbare Platz ändert.

Mit FlexBox können Sie:

• Festlegen, wie Elemente vergrößert und verkleinert werden, um den verfügbaren Platz auszufüllen
• Elemente in neue Zeilen oder Spalten umbrechen, wenn nicht genügend Platz vorhanden ist
• Zusätzlichen Platz zwischen Elementen mit praktischen Voreinstellungen verteilen

Wann FlexBox verwendet werden sollte

FlexBox wird normalerweise verwendet, um eine kleine Anzahl von Elementen innerhalb eines gesamten Bildschirmlayouts anzuzeigen. Für ein allgemeines Bildschirmlayout ist Grid in der Regel die bessere Wahl. FlexBox unterstützt kein Lazy Loading von Elementen. Verwenden Sie Lazy-Listen und -Raster, um eine große Anzahl von Elementen anzuzeigen. Wenn Sie Elemente umbrechen müssen, verwenden Sie FlexBox anstelle von FlowRow und FlowColumn.

Terminologie und Konzepte

FlexBox ordnet seine Elemente entweder in horizontalen oder vertikalen Zeilen an. Die Richtung dieser Linien bestimmt die Hauptachse. Im 90-Grad-Winkel zur Hauptachse befindet sich die Querachse. Die Länge des FlexBox entlang der Hauptachse wird als Hauptgröße bezeichnet. Die entsprechende Länge der Querachse wird als Quergröße bezeichnet. Diese Größen und Achsen bilden die Grundlage für das Verhalten von FlexBox.

Eigenschaften anwenden

Sie können FlexBox-Attribute auf zwei Arten anwenden:

• Zum FlexBox-Container mit FlexBox(config)
• Zu einem Element innerhalb des FlexBox mit Modifier.flex

Containerattribute (config)

Elementattribute (Modifier.flex)

direction: die Layoutrichtung des Elements wrap: Gibt an, ob Elemente umgebrochen werden sollen, wenn die Hauptgröße nicht ausreicht. justifyContent – wie Elemente entlang der Hauptachse verteilt werden alignItems – wie Elemente entlang der Querachse ausgerichtet werden alignContent: wie zusätzlicher Platz aus der Quergröße verteilt wird, wenn mehrere Zeilen vorhanden sind rowGap / columnGap: Fügt Platz zwischen Elementen und Zeilen hinzu. Weitere Informationen zu diesen Attributen finden Sie unter Containerverhalten festlegen.

basis: die Größe des Elements, bevor zusätzlicher Platz aus der Hauptgröße verteilt wird grow: der Anteil des zusätzlichen Platzes von der Hauptgröße, den dieses Element erhalten soll shrink: der Anteil des Platzdefizits der Hauptgröße, den dieses Element erhalten soll alignSelf: wie zusätzlicher Platz von der Quergröße auf dieses Element verteilt wird, überschreibt alignItems order – Steuert die Layoutreihenfolge Weitere Informationen zu diesen Attributen finden Sie unter Elementverhalten festlegen.

FlexBox-Layoutalgorithmus verstehen

Eine der leistungsstärksten Funktionen von FlexBox ist die Möglichkeit, die Größe der untergeordneten Elemente so anzupassen, dass sie optimal in den verfügbaren Platz passen. Wenn Sie wissen, wie FlexBox das macht, können Sie FlexBox-Eigenschaften so festlegen, dass die Benutzeroberfläche für alle möglichen Größen optimiert wird.

Der Layoutalgorithmus von FlexBox funktioniert so:

1. Basisgröße des untergeordneten Elements berechnen: Verwenden Sie den basis-Wert des untergeordneten Elements, um seine anfängliche Größe entlang der Hauptachse zu berechnen, bevor zusätzlicher Platz verteilt wird.

2. Untergeordnete Elemente sortieren: Die untergeordneten Elemente werden nach ihren order-Werten sortiert, sofern vorhanden.

3. Zeilen erstellen: Prüfen Sie für jedes untergeordnete Element, ob seine ursprüngliche Größe plus gap in den verbleibenden Platz in der aktuellen Zeile passt. Wenn ja, stellen Sie dieses Kind in die Reihe. Wenn nicht, wird es in einer neuen Zeile platziert, sofern der Zeilenumbruch aktiviert ist. Andernfalls wird das Element in der aktuellen Zeile platziert, wo es überläuft (es wird teilweise durch den Rand des Containers verdeckt).

4. Elemente auf der Hauptachse ausrichten oder ihre Größe anpassen: Verteilen Sie für jede Zeile zusätzlichen Platz auf oder zwischen Elementen, indem Sie ihre Größe anpassen oder sie ausrichten.

5. Elemente auf der Querachse ausrichten oder ihre Größe anpassen: Verteilen Sie für jede Zeile zusätzlichen Platz auf oder zwischen Elementen und Zeilen, indem Sie sie strecken oder ausrichten.

Nachdem Sie sich mit den FlexBox-Konzepten vertraut gemacht haben, können Sie unter Erste Schritte eine einfache FlexBox erstellen.