CSS Flexible Box Layout
Das CSS flexible box layout-Modul definiert ein CSS-Boxmodell, das für das Design von Benutzeroberflächen und das Layout von Elementen in einer Dimension optimiert ist. Im Flexlayout-Modell können die Kinder eines Flexcontainers in jede Richtung angeordnet werden und ihre Größen „flexibilisieren“, indem sie entweder wachsen, um ungenutzten Platz zu füllen, oder schrumpfen, um ein Überlaufen des übergeordneten Elements zu vermeiden. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann einfach manipuliert werden.
Flexible Box Layout in Aktion
Im folgenden Beispiel wurde ein Container auf display: flex
gesetzt, was bedeutet, dass die drei Kindelemente zu Flex-Elementen werden. Der Wert von justify-content
wurde auf space-between
festgelegt, um die Elemente gleichmäßig auf der Hauptachse zu verteilen. Zwischen jedem Element wird ein gleichmäßiger Abstand platziert, wobei die linken und rechten Elemente bündig mit den Rändern des Flexcontainers abschließen. Sie können auch sehen, dass die Elemente auf der Querachse gestreckt werden, da der Standardwert von align-items
auf stretch
gesetzt ist. Die Elemente strecken sich auf die Höhe des Flexcontainers, sodass sie alle so hoch wie das höchste Element erscheinen.
<div class="box">
<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
- Grundlegende Konzepte von Flexbox
-
Ein Überblick über die Funktionen von Flexbox.
- Beziehungen von Flexbox zu anderen Layoutmethoden
-
Wie Flexbox mit anderen Layoutmethoden und CSS-Spezifikationen zusammenhängt.
- Ausrichten von Elementen in einem Flexcontainer
-
Wie die Box-Ausrichtungseigenschaften mit Flexbox funktionieren.
- Reihenfolge von Flex-Elementen festlegen
-
Erklärung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, einschließlich der potenziellen Probleme.
- Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse
-
Erklärung der Eigenschaften
flex-grow
,flex-shrink
undflex-basis
. - Meisterung 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 für Flexbox sind.
- CSS-Layout: Flexbox
-
Lernen Sie, wie man mit dem Flexbox-Layout Webseiten gestaltet.
- Box-Ausrichtung in Flexbox
-
Details zu den Funktionen der CSS-Box-Ausrichtung, die speziell für Flexbox gelten.
Verwandte Konzepte
CSS Box-Ausrichtung-Modul
CSS Box-Sizing-Modul
aspect-ratio
max-content
-Wertmin-content
-Wertfit-content
-Wert- intrinsische Größe Glossarbegriff
Spezifikationen
Specification |
---|
CSS Flexible Box Layout Module Level 1 |