CSS Flexibler Box-Layout

Das CSS Flexible Box-Layout-Modul definiert ein CSS-Box-Modell, das für die Gestaltung 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 jeder Richtung angeordnet werden und ihre Größen "flexen", entweder indem sie wachsen, um ungenutzten Raum zu füllen, oder schrumpfen, um ein Überlaufen des Elternteils zu vermeiden. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann leicht manipuliert werden.

Flexibler Box-Layout in Aktion

Im folgenden Beispiel wurde ein Container auf display: flex gesetzt, was bedeutet, dass die drei Kinderelemente zu Flex-Elementen werden. Der Wert von justify-content wurde auf space-between gesetzt, um die Elemente gleichmäßig entlang der Hauptachse zu verteilen. Ein gleicher Abstand wird zwischen den einzelnen Elementen platziert, wobei die linken und rechten Elemente bündig mit den Rändern des Flex-Containers abschließen. Sie können auch sehen, dass sich die Elemente auf der Querachse strecken, aufgrund des Standardwertes von align-items, der stretch ist. Die Elemente strecken sich bis zur Höhe des Flex-Containers, wodurch sie jeweils so hoch erscheinen wie das größte 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 Eigenschaften von Flexbox.
Verhältnis von Flexbox zu anderen Layoutmethoden: Wie Flexbox in Beziehung zu anderen Layoutmethoden und anderen CSS-Spezifikationen steht.
Ausrichten von Elementen in einem Flex-Container: Wie die Box-Ausrichtungseigenschaften mit Flexbox funktionieren.
Bestellung von Flex-Elementen: Erläutert die verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, sowie die potenziellen Probleme dabei.
Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erläuterung der Eigenschaften flex-grow, flex-shrink und flex-basis.
Beherrschung der Umbrüche von Flex-Elementen: So erstellen Sie Flex-Container mit mehreren Linien und steuern die Darstellung der Elemente in diesen Linien.
Typische Anwendungsfälle von Flexbox: Häufige Designmuster, die typische Flexbox-Anwendungsfälle sind.
CSS-Layout: Flexbox: Erfahren Sie, wie Sie Flexbox verwenden, um Web-Layouts zu erstellen.
Box-Ausrichtung in Flexbox: Behandelt Eigenschaften der CSS-Box-Ausrichtung, die speziell für Flexbox gelten.

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