CSS Flexible Box Layout

Das CSS Flexible Box Layout Modul definiert ein CSS-Box-Modell, das für die Gestaltung von Benutzeroberflächen optimiert ist und das Layout von Elementen in einer Dimension ermöglicht. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in jede Richtung angeordnet werden und ihre Größen können sich "flexibel" anpassen, indem sie entweder 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 können einfach manipuliert werden.

Flexibles 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 gesetzt, um die Elemente gleichmäßig auf der Hauptachse zu verteilen. Ein gleicher Abstand wird zwischen jedem Element platziert, wobei das linke und das rechte Element bündig mit den Rändern des Flex-Containers sind. 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, sodass sie jeweils 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;
}

Grundkonzepte von Flexbox: Ein Überblick über die Funktionen von Flexbox.
Beziehung von Flexbox zu anderen Layoutmethoden: Wie sich Flexbox zu anderen Layoutmethoden und CSS-Spezifikationen verhält.
Ausrichten von Elementen in einem Flex-Container: Wie die Box-Ausrichtungseigenschaften mit Flexbox funktionieren.
Reihenfolge der Flex-Elemente ändern: Erklärung der verschiedenen Möglichkeiten zur Änderung der Reihenfolge und Richtung von Elementen sowie potenziellen Problemen dabei.
Kontrollieren der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erläutert die Eigenschaften flex-grow, flex-shrink und flex-basis.
Meistern des Umbruchs von Flex-Elementen: Wie Sie Flex-Container mit mehreren Zeilen erstellen und die Anzeige der Elemente in diesen Zeilen steuern.
Typische Anwendungsfälle von Flexbox: Häufige Designmuster, die typische Verwendungszwecke von Flexbox sind.
CSS-Layout: Flexbox: Erlernen Sie die Verwendung des Flexbox-Layouts zur Erstellung von Web-Layouts.
Box-Ausrichtung in Flexbox: Details zu den Eigenschaften der CSS-Box-Ausrichtung, die spezifisch für Flexbox sind.