CSS-Flexbox-Layout

Das CSS-Flexbox-Layout-Modul definiert ein CSS-Box-Modell, das für das Design von Benutzeroberflächen optimiert ist und die Anordnung von Elementen in einer Dimension ermöglicht. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in jede Richtung angeordnet werden und ihre Größen "flexen", entweder um ungenutzten Raum zu füllen oder um zu vermeiden, dass sie den Eltern überschreiten. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann leicht manipuliert werden.

Flexbox-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 gesetzt, um die Elemente gleichmäßig auf der Hauptachse zu verteilen. Ein gleicher Abstand wird zwischen jedes Element gesetzt, 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, da der Standardwert von align-items stretch ist. Die Elemente strecken sich auf die Höhe des Flex-Containers und erscheinen so jeweils so hoch wie das höchste Element.

html

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
</div>

css

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;
}

Grundlegende Konzepte von Flexbox: Ein Überblick über die Funktionen von Flexbox.
Beziehung von Flexbox zu anderen Layout-Methoden: Wie Flexbox im Verhältnis zu anderen Layout-Methoden und CSS-Spezifikationen steht.
Ausrichten von Elementen in einem Flex-Container: Wie die Box-Ausrichtungseigenschaften mit Flexbox funktionieren.
Anordnung von Flex-Elementen: Erklärungen zu den verschiedenen Möglichkeiten, die Reihenfolge und Richtung der Elemente zu ändern, und die potenziellen Probleme dabei.
Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erklärungen zu den Eigenschaften flex-grow, flex-shrink und flex-basis.
Beherrschen des Umbruchs 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 Anwendungsfälle für Flexbox sind.
CSS-Layout: Flexbox: Lernen Sie, wie man mit Flexbox-Layout Weblayouts erstellt.
Box-Ausrichtung in Flexbox: Detailierte Funktionen der CSS-Box-Ausgleichung, spezifisch für Flexbox.

Spezifikationen

Specification
CSS Flexible Box Layout Module Level 1

CSS-Flexbox-Layout

Flexbox-Layout in Aktion

Referenz

Eigenschaften

Glossarbegriffe

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch