CSS flexible box layout
Das CSS flexible box layout Modul definiert ein CSS-Boxmodell, das für Benutzeroberflächendesigns und das Layout von Elementen in einer Dimension optimiert ist. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in jede Richtung angeordnet werden und ihre Größen "flexen", entweder indem sie wachsen, um ungenutzten Raum zu füllen, oder schrumpfen, um ein Überlaufen des Elternteils zu vermeiden. Sowohl die horizontale als auch vertikale Ausrichtung der Kinder kann leicht manipuliert werden.
Flexible Box Layout im Einsatz
Im folgenden Beispiel wurde ein Container auf display: flex gesetzt, wodurch die drei Kinderelemente zu Flex-Elementen werden. Der Wert von justify-content wurde auf space-between gesetzt, um die Elemente gleichmäßig auf der Hauptachse zu verteilen. Ein gleicher Abstand wird zwischen jedem Element platziert, wobei die linken und rechten Elemente bündig mit den Rändern des Flex-Containers abschließen. Sie können auch sehen, dass die Elemente sich auf der Querachse strecken, aufgrund des Standardwertes von align-items, der stretch ist. Die Elemente strecken sich auf die Höhe des Flex-Containers, wodurch sie jeweils so groß wie das höchste Element erscheinen.
Referenz
Eigenschaften
Glossareinträge
Leitfäden
- Grundkonzepte von Flexbox
-
Ein Überblick über die Funktionen von Flexbox.
- Verhältnis von Flexbox zu anderen Layoutmethoden
-
Wie sich Flexbox auf andere Layoutmethoden und andere CSS-Spezifikationen bezieht.
- Ausrichten von Elementen in einem Flex-Container
-
Wie die Box-Ausrichtungs-Eigenschaften mit Flexbox funktionieren.
- Anordnung von Flex-Elementen
-
Erklärung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern und mögliche Probleme dabei zu behandeln.
- Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse
-
Erklärt die Eigenschaften
flex-grow,flex-shrinkundflex-basis. - Beherrschung des Umbruchs von Flex-Elementen
-
Wie man Flex-Container mit mehreren Zeilen erstellt und die Anzeige der Elemente in diesen Zeilen steuert.
- Typische Anwendungsfälle von Flexbox
-
Häufige Designmuster, die typische Anwendungsfälle von Flexbox sind.
- CSS-Layout: Flexbox
-
Lernen Sie, wie Sie das Flexbox-Layout verwenden, um Weblayouts zu erstellen.
- Box-Ausrichtung in Flexbox
-
Details zu den Eigenschaften der CSS-Box-Ausrichtung, die spezifisch für Flexbox sind.
Verwandte Konzepte
Spezifikationen
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 |