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.

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

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 und flex-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

Spezifikationen

Specification
CSS Flexible Box Layout Module Level 1

Siehe auch