CSS flexibles Box-Layout

Das CSS Flexibles 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 können ihre Größen "flexen", entweder um ungenutzten Raum zu füllen oder um zu vermeiden, dass sie über das Elternteil hinausgehen. Sowohl die horizontale als auch die vertikale Ausrichtung der Kinder kann leicht 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. Zwischen jedem Element wird ein gleicher Abstand platziert, wobei die linken und rechten Elemente bündig mit den Rändern des Flex-Containers sind. Außerdem können Sie sehen, dass sich die Elemente auf der Kreuzachse strecken, da der Standardwert von align-items stretch ist. Die Elemente strecken sich auf die Höhe des Flex-Containers, wodurch 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;
}

Grundlagen von Flexbox: Ein Überblick über die Funktionen von Flexbox.
Verhältnis von Flexbox zu anderen Layoutmethoden: Wie Flexbox im Verhältnis zu anderen Layoutmethoden und anderen CSS-Spezifikationen steht.
Ausrichtung von Elementen in einem Flex-Container: Wie die Box-Ausrichtungs-Eigenschaften mit Flexbox funktionieren.
Reihenfolge von Flex-Elementen ändern: Erläuterung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung der Elemente zu ändern, sowie potenzielle Probleme dabei.
Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erklärung der Eigenschaften flex-grow, flex-shrink und flex-basis.
Meistern des Zeilenumbruchs 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: Gängige Designmuster, die typische Anwendungsfälle für Flexbox sind.
CSS-Layout: Flexbox: Lernen Sie, wie Sie das Flexbox-Layout verwenden, um Weblayouts zu erstellen.
Box-Ausrichtung in Flexbox: Details zu Funktionen der CSS-Box-Ausrichtung, die spezifisch für Flexbox sind.