CSS-Flexbox-Layout

Das CSS flexible box layout-Modul definiert ein CSS-Boxmodell, das für die Gestaltung von Benutzeroberflächen 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 um ungenutzten Raum zu füllen oder um zu schrumpfen, um ein Überlaufen des Elternteils zu vermeiden. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann einfach manipuliert werden.

Flexibles Box-Layout in Aktion

Im folgenden Beispiel wurde ein Container auf display: flex gesetzt, was bedeutet, dass die drei Kind-Elemente zu Flex-Elementen werden. Der Wert von justify-content wurde auf space-between gesetzt, um die Elemente gleichmäßig auf der Hauptachse zu verteilen. Eine gleiche Menge an Raum befindet sich zwischen jedem Element, 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, da der Standardwert von align-items stretch ist. Die Elemente strecken sich auf die Höhe des Flex-Containers und erscheinen dadurch 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;
}

Grundkonzepte 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.
Sortieren von Flex-Elementen: Erklärt die verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, und behandelt mögliche Probleme dabei.
Kontrollieren der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erklärt die Eigenschaften flex-grow, flex-shrink und flex-basis.
Beherrschen der Umbruch-Möglichkeiten von Flex-Elementen: Wie man Flex-Container mit mehreren Linien erstellt und die Darstellung der Elemente in diesen Linien kontrolliert.
Typische Anwendungsfälle von Flexbox: Gängige Designmuster, die typische Flexbox-Anwendungsfälle sind.
CSS-Layout: Flexbox: Lernen Sie, wie man das Flexbox-Layout zur Erstellung von Web-Layouts verwendet.
Box-Ausrichtung in Flexbox: Detailliert die Funktionen der CSS-Box-Ausrichtung, die spezifisch für Flexbox sind.

Spezifikationen

Specification
CSS Flexible Box Layout Module Level 1

CSS-Flexbox-Layout

Flexibles Box-Layout in Aktion

Referenz

Eigenschaften

Glossarbegriffe

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch