CSS flexibles Box-Layout

Das CSS flexibles Box-Layout Modul definiert ein CSS-Boxmodell, das für Benutzeroberflächen-Design und das Layout von Elementen in einer Dimension optimiert ist. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in jeder Richtung angeordnet werden und ihre Größen "flexibilisieren", entweder durch Wachsen, um ungenutzten Raum zu füllen, oder Schrumpfen, um ein Überlaufen des übergeordneten Elements zu vermeiden. 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 Kinderelemente Flex-Elemente werden. Der Wert von justify-content wurde auf space-between gesetzt, um die Elemente auf der Hauptachse gleichmäßig zu verteilen. Ein gleicher Abstand wird zwischen jedem Element platziert, 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, aufgrund des Standardwerts von align-items, der 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.
Verhältnis von Flexbox zu anderen Layout-Methoden: Wie sich Flexbox zu anderen Layout-Methoden und CSS-Spezifikationen verhält.
Ausrichtung von Elementen in einem Flex-Container: Wie die Box-Ausrichtungs-Eigenschaften mit Flexbox funktionieren.
Anordnung von Flex-Elementen: Erläuterung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung der Elemente zu ändern, und die möglichen Probleme dabei.
Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erklärung der Eigenschaften flex-grow, flex-shrink und flex-basis.
Beherrschung der Umbrüche von Flex-Elementen: Wie man Flex-Container mit mehreren Zeilen erstellt und die Darstellung der Elemente in diesen Zeilen steuert.
Typische Anwendungsfälle von Flexbox: Häufige Designmuster, die typische Flexbox-Anwendungsfälle sind.
CSS-Layout: Flexbox: Erlernen, wie man das Flexbox-Layout zur Erstellung von Web-Layouts verwendet.
Box-Ausrichtung in Flexbox: Detaillierte Merkmale der CSS-Box-Ausrichtung, die spezifisch für Flexbox sind.