FlexBox

FlexBox ist ein Container, in dem Elemente in einer einzigen Richtung angeordnet werden. Er kann die Größe von Elementen ändern, sie umbrechen, ausrichten und den verfügbaren 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 zum Ändern der Größe von Elementen, wenn sich der verfügbare Platz ändert.

Mit FlexBox können Sie Folgendes tun:

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

Wann sollte FlexBox verwendet werden?

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

Terminologie und Konzepte

FlexBox ordnet seine Elemente in horizontalen oder vertikalen Zeilen an. Diese Richtung der Zeilen bestimmt die Hauptachse. Im 90-Grad-Winkel zur Hauptachse befindet sich die Querachse. Die Länge von 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-Eigenschaften auf zwei Arten anwenden:

• Auf den FlexBox-Container mit FlexBox(config)
• Auf ein Element in FlexBox mit Modifier.flex

Containereigenschaften (config)

Elementeigenschaften (Modifier.flex)

direction – die Richtung des Elementlayouts wrap – gibt an, ob Elemente umgebrochen werden sollen, wenn die Hauptgröße nicht ausreicht justifyContent – gibt an, wie Elemente entlang der Hauptachse verteilt werden sollen alignItems – gibt an, wie Elemente entlang der Querachse ausgerichtet werden sollen alignContent – gibt an, wie zusätzlicher Platz aus der Quergröße verteilt werden soll, wenn mehrere Zeilen vorhanden sind rowGap / columnGap – fügt Platz zwischen Elementen und Zeilen hinzu Weitere Informationen zu diesen Eigenschaften 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 aus der Hauptgröße, den dieses Element erhalten soll shrink – der Anteil des Platzdefizits aus der Hauptgröße , den dieses Element erhalten soll alignSelf – gibt an, wie zusätzlicher Platz aus der Quergröße an dieses Element verteilt werden soll. Überschreibt alignItems. order – steuert die Layoutreihenfolge Weitere Informationen zu diesen Eigenschaften finden Sie unter Elementverhalten festlegen.

Layoutalgorithmus von FlexBox

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 die FlexBox-Eigenschaften so festlegen, dass die Benutzeroberfläche für alle möglichen Größen optimiert wird.

Der Layoutalgorithmus von FlexBox funktioniert so:

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

2. Untergeordnete Elemente sortieren: Sortieren Sie die untergeordneten Elemente nach ihren order-Werten, falls 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, platzieren Sie dieses untergeordnete Element in der Zeile. Wenn nicht, platzieren Sie es in einer neuen Zeile, wenn der Umbruch aktiviert ist. Andernfalls wird das Element in der aktuellen Zeile platziert , wo es überläuft (es wird teilweise vom Rand des Containers verdeckt).

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

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

Nachdem Sie nun mit den Konzepten von FlexBox vertraut sind, finden Sie unter Erste Schritte Informationen zum Erstellen eines einfachen FlexBox.