CSS-Flexbox-Layout

Das Modul CSS-Flexbox-Layout definiert ein CSS-Boxmodell, das für die Gestaltung von Benutzeroberflächen und die eindimensionale Anordnung von Elementen optimiert ist. Im Flex-Layout-Modell können die Kindelemente eines Flex-Containers in beliebiger Richtung angeordnet werden. Ihre Größe kann sich flexibel ändern: Sie können wachsen, um ungenutzten Platz auszufüllen, oder schrumpfen, damit sie nicht über das Elternelement hinausragen. Sowohl die horizontale als auch die vertikale Ausrichtung der Kindelemente lässt sich einfach anpassen.

Flexbox-Layout in Aktion

Im folgenden Beispiel wurde für einen Container display: flex festgelegt. Dadurch werden seine drei Kindelemente zu Flex-Elementen. justify-content hat den Wert space-between, damit die Elemente entlang der Hauptachse verteilt werden. Zwischen den Elementen befindet sich jeweils gleich viel Platz, während das linke und das rechte Element bündig an den Rändern des Flex-Containers liegen. Sie können außerdem sehen, dass sich die Elemente entlang der Querachse ausdehnen, da align-items standardmäßig den Wert stretch hat. Die Elemente dehnen sich auf die Höhe des Flex-Containers aus, sodass sie alle so hoch erscheinen 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 zwischen Flexbox und anderen Layoutmethoden: Wie Flexbox mit anderen Layoutmethoden und CSS-Spezifikationen zusammenhängt.
Elemente in einem Flex-Container ausrichten: Wie die Eigenschaften zur Box-Ausrichtung mit Flexbox funktionieren.
Flex-Elemente anordnen: Erläutert die verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, sowie mögliche Probleme dabei.
Größenverhältnisse von Flex-Elementen entlang der Hauptachse steuern: Erläutert die Eigenschaften flex-grow, flex-shrink und flex-basis.
Den Zeilenumbruch von Flex-Elementen beherrschen: Wie Sie mehrzeilige Flex-Container erstellen und die Darstellung der Elemente in diesen Zeilen steuern.
Typische Anwendungsfälle für Flexbox: Häufige Gestaltungsmuster, für die Flexbox typischerweise eingesetzt wird.
CSS-Layout: Flexbox: Erfahren Sie, wie Sie mit Flexbox Weblayouts erstellen.
Box-Ausrichtung in Flexbox: Beschreibt die Besonderheiten der CSS-Box-Ausrichtung bei Flexbox.
CSS-Abstände definieren: Wie Sie Abstände in Grid-, Flexbox- und mehrspaltigen Layouts verstehen und definieren, einschließlich der Berechnung von Prozentwerten.

Spezifikationen

Spezifikation
CSS Flexible Box Layout Module Level 2
CSS Flexible Box Layout Module Level 1

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Flexbox-Layout

Flexbox-Layout in Aktion

Referenz

Eigenschaften

Glossarbegriffe

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch

Help improve MDN