CSS Flexibler Box-Layout

Das CSS Flexibler Box-Layout-Modul definiert ein CSS-Boxmodell, das für das Design von Benutzeroberflächen optimiert ist und das Layout von Elementen in einer Dimension. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in jede Richtung angeordnet werden und ihre Größen können sich "flexen", entweder um ungenutzten Platz zu füllen oder um zu verhindern, dass der Inhalt aus dem übergeordneten Element herausfließt. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann einfach manipuliert werden.

Flexibler 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 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 auf der Querachse gestreckt werden, aufgrund des Standardwerts von align-items, der stretch ist. Die Elemente dehnen sich auf die Höhe des Flex-Containers aus und erscheinen daher alle gleich 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;
}

Grundkonzepte von Flexbox: Ein Überblick über die Eigenschaften 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.
Anordnen von Flex-Elementen: Erklärung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, und Behandlung der potenziellen Probleme dabei.
Verhältnissteuerung von Flex-Elementen entlang der Hauptachse: Erklärung der 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 darstellen.
CSS-Layout: Flexbox: Lernen Sie, wie man mit Flexbox-Layout Weblayouts erstellt.
Box-Ausrichtung in Flexbox: Details zu den Funktionen der CSS-Box-Ausrichtung, die spezifisch für Flexbox sind.

Spezifikationen

Specification
CSS Flexible Box Layout Module Level 1

CSS Flexibler Box-Layout

Flexibler Box-Layout in Aktion

Referenz

Eigenschaften

Glossarbegriffe

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch