FlexBox

Hinweis :FlexBox ist derzeit eine experimentelle API und wird sich wahrscheinlich in Zukunft ändern. Melden Sie alle Probleme in der Problemverfolgung.

FlexBox ist ein Container, in dem Elemente in einer einzigen Richtung angeordnet werden. Es 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 unterschiedlich große Elemente und zum Anpassen der Größe 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 für sie vorhanden ist
• Zusätzlichen Abstand zwischen Elementen mit praktischen Voreinstellungen verteilen

Wann sollte FlexBox verwendet werden?

FlexBox wird in der Regel verwendet, um eine kleine Anzahl von Elementen innerhalb eines gesamten Bildschirmlayouts darzustellen. Für ein allgemeines 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 umschließen müssen, verwenden Sie FlexBox anstelle von FlowRow und FlowColumn.

Terminologie und Konzepte

Wichtiger Hinweis :FlexBox basiert auf der CSS Flexible Box Layout-Spezifikation und hat fast identische Konzepte, Begriffe und Verhaltensweisen. Wenn Sie mit display: flex vertraut sind, werden Sie feststellen, dass die Eigenschaften und das Verhalten von FlexBox fast identisch sind.

FlexBox ordnet seine Elemente entweder in horizontalen oder vertikalen Zeilen an. Die Richtung dieser Linien bestimmt die Hauptachse. Die Querachse verläuft im 90‑Grad-Winkel zur Hauptachse. 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.

Abbildung 1: Achsen und Größen, wenn die FlexBox-Richtung Row ist.

Abbildung 2. Achsen und Größen, wenn die FlexBox-Richtung Column ist.

Eigenschaften anwenden

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

• Zum FlexBox-Container mit FlexBox(config)
• Auf ein Element innerhalb von FlexBox mit Modifier.flex

Containereigenschaften (config)

Elementattribute (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. alignItems – Elemente entlang der Querachse ausrichten alignContent: So wird zusätzlicher Platz aus der cross size verteilt, wenn mehrere Zeilen vorhanden sind. rowGap / columnGap: Fügt Leerräume zwischen Elementen und Zeilen ein. Weitere Informationen zu diesen Attributen finden Sie unter Containerverhalten festlegen.

basis: Die Größe des Artikels, bevor zusätzlicher Speicherplatz aus der Hauptgröße verteilt wird. grow – der Anteil des zusätzlichen Speicherplatzes, den dieser Artikel von der Hauptgröße erhalten soll shrink – der Anteil des Speicherplatzdefizits der Hauptgröße, den dieser Artikel erhalten sollte alignSelf – wie zusätzlicher Leerraum von der Kreuzgröße auf dieses Element verteilt werden soll. Überschreibt alignItems. order – steuert die Layoutreihenfolge Weitere Informationen zu diesen Attributen finden Sie unter Elementverhalten festlegen.

FlexBox-Layoutalgorithmus

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 festlegen, um die Benutzeroberfläche für alle möglichen Größen zu optimieren.

Der Layoutalgorithmus von FlexBox funktioniert so:

1. Basisgröß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, 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, fügen Sie das Kind in die Zeile ein. Andernfalls wird es in eine neue Zeile eingefügt, wenn Zeilenumbruch aktiviert ist. Andernfalls wird es in die aktuelle Zeile eingefügt, wo es überläuft und teilweise vom Rand des Containers verdeckt wird.

4. Elemente auf der Hauptachse ausrichten oder ihre Größe anpassen: Verteilen Sie für jede Zeile zusätzlichen Leerraum auf oder zwischen Elementen, indem Sie die 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 Leerraum auf oder zwischen Elementen und Zeilen, indem Sie sie dehnen oder ausrichten.

Nachdem Sie sich mit den FlexBox-Konzepten vertraut gemacht haben, können Sie mit der Erstellung einer einfachen FlexBox beginnen.