Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
CSS flexibles Box-Layout
DasCSS flexibles Box-Layout Modul definiert ein CSS-Boxmodell, das für Benutzeroberflächen-Design und das Layout von Elementen in einer Dimension optimiert ist. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in jeder Richtung angeordnet werden und ihre Größen "flexibilisieren", entweder durch Wachsen, um ungenutzten Raum zu füllen, oder Schrumpfen, um ein Überlaufen des übergeordneten Elements zu vermeiden. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann leicht manipuliert werden.
Flexibles Box-Layout in Aktion
Im folgenden Beispiel wurde ein Container aufdisplay: flex gesetzt, was bedeutet, dass die drei Kinderelemente Flex-Elemente werden. Der Wert vonjustify-content wurde aufspace-between gesetzt, um die Elemente auf der Hauptachse gleichmäßig 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 auf der Querachse gestreckt werden, aufgrund des Standardwerts vonalign-items, derstretch ist. Die Elemente strecken sich auf die Höhe des Flex-Containers und erscheinen dadurch jeweils so hoch wie das höchste Element.
<div> <div>One</div> <div>Two</div> <div>Three <br />has <br />extra <br />text</div></div>body { font-family: sans-serif;}.box { border: 2px dotted rgb(96 139 168); display: flex; justify-content: space-between;}.box > * { border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); padding: 1em;}Referenz
Eigenschaften
Glossarbegriffe
Leitfäden
- Grundkonzepte von Flexbox
Ein Überblick über die Funktionen von Flexbox.
- Verhältnis von Flexbox zu anderen Layout-Methoden
Wie sich Flexbox zu anderen Layout-Methoden und CSS-Spezifikationen verhält.
- Ausrichtung von Elementen in einem Flex-Container
Wie die Box-Ausrichtungs-Eigenschaften mit Flexbox funktionieren.
- Anordnung von Flex-Elementen
Erläuterung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung der Elemente zu ändern, und die möglichen Probleme dabei.
- Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse
Erklärung der Eigenschaften flex-grow, flex-shrink und flex-basis.
- Beherrschung der Umbrüche von Flex-Elementen
Wie man Flex-Container mit mehreren Zeilen erstellt und die Darstellung der Elemente in diesen Zeilen steuert.
- Typische Anwendungsfälle von Flexbox
Häufige Designmuster, die typische Flexbox-Anwendungsfälle sind.
- CSS-Layout: Flexbox
Erlernen, wie man das Flexbox-Layout zur Erstellung von Web-Layouts verwendet.
- Box-Ausrichtung in Flexbox
Detaillierte Merkmale derCSS-Box-Ausrichtung, die spezifisch für Flexbox sind.
Verwandte Konzepte
CSS Box-Ausrichtung Modul
CSS Box-Größe Modul
aspect-ratiomax-contentWertmin-contentWertfit-contentWert- intrinsische Größe Glossarbegriff
Spezifikationen
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 |