Die CSS-Eigenschaft "display: flex" bietet eine leistungsstarke Möglichkeit, flexible und reaktionsfähige Layouts zu erstellen. Sie eröffnet eine Vielzahl von Möglichkeiten zur Positionierung und Anordnung von Elementen. Hier sind einige Vorteile und das Verhalten der "display: flex"-Eigenschaft:
Die "display: flex"-Eigenschaft ermöglicht die Erstellung von Flexbox-Containern, in denen die darin enthaltenen Elemente flexibel angeordnet werden können. Flexbox bietet eine effiziente Lösung für komplexe Layouts, da es automatisch die Ausrichtung, den Abstand und die Größenverteilung der Elemente verwaltet.
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
Flexbox arbeitet mit einem Container-Element, dem sogenannten Flex-Container, und den darin enthaltenen Kind-Elementen der ersten Ebene, den sogenannten Flex-Items. Die Flexbox agiert ausschließlich auf dieser obersten Ebene und ignoriert weitere Kinder auf unteren Ebenen.
Und so aktiveren wir mit display:flex die flex-box.
.flex-container {
display:flex;
}
Vorteile und Verhalten von "display: flex":
Flexibles Layout: "display: flex" erlaubt das flexible Anordnen von Elementen in einer einzigen Zeile oder in mehreren Zeilen, je nachdem, wie viel Platz verfügbar ist. Dies ermöglicht eine einfache Anpassung an verschiedene Bildschirmgrößen und Geräte.
Elemente Positionieren
Durch die Verwendung der Container-Eigenschaften justify-content und align-items können die Elemente auf den beiden Achsen positioniert werden. Mit der Eigenschaft flex-direction kann zudem die Ausrichtung der Hauptachse geändert werden.
Die Standardwerte für die Flexbox-Eigenschaften lauten wie folgt: Der flex-direction-Standardwert ist "row" (von links nach rechts), der justify-content-Standardwert ist "flex-start" (Beginn der Hauptachse) und der align-items-Standardwert ist "stretch" (Elemente sind so hoch wie der Flex-Container).
Flex-direction - Elemente auf der Achse drehen
Die Eigenschaft "flex-direction" bietet verschiedene Optionen zur Ausrichtung der Elemente und hat folgende verfügbare Werte:
"row" (von links nach rechts, Standardwert)
"row-reverse" (von rechts nach links)
"column" (von oben nach unten)
"column-reverse" (von unten nach oben)
justify-content
Die CSS-Eigenschaft "justify-content" definiert die Ausrichtung und Positionierung der Flex-Elemente entlang der Hauptachse innerhalb eines Flex-Containers. Sie ermöglicht die Kontrolle über den Abstand zwischen den Elementen und den verfügbaren Platz innerhalb des Containers.
Es stehen verschiedene Werte zur Verfügung, darunter:
"flex-start": Die Elemente werden am Anfang der Hauptachse positioniert. Dies entspricht normalerweise einer Linksausrichtung.
"flex-end": Die Elemente werden am Ende der Hauptachse positioniert. Dies entspricht normalerweise einer Rechtsausrichtung.
"center": Die Elemente werden in der Mitte der Hauptachse zentriert.
"space-between": Die Elemente werden gleichmäßig über den verfügbaren Platz auf der Hauptachse verteilt, wobei der erste und letzte Abstand zur Containerkante bleibt.
"space-around": Die Elemente werden gleichmäßig über den verfügbaren Platz auf der Hauptachse verteilt, wobei gleiche Abstände sowohl vor dem ersten als auch nach dem letzten Element entstehen.
"space-evenly": Die Elemente werden gleichmäßig über den verfügbaren Platz auf der Hauptachse verteilt, wobei gleiche Abstände zwischen den Elementen und zu den Containerkanten entstehen.
justify-items
Die CSS-Eigenschaft "justify-items" definiert die horizontale Ausrichtung und Positionierung von einzelnen Flex-Elementen innerhalb eines Flex-Containers. Sie ermöglicht die Kontrolle über die Platzierung der Elemente entlang der Hauptachse.
Es stehen verschiedene Werte zur Verfügung, darunter:
"flex-start": Die Elemente werden am Anfang der Hauptachse positioniert.
"flex-end": Die Elemente werden am Ende der Hauptachse positioniert.
"center": Die Elemente werden horizontal in der Mitte der Hauptachse zentriert.
"baseline": Die Elemente werden anhand ihrer Grundlinie ausgerichtet.
"stretch": Die Elemente werden in der Breite gestreckt, um den gesamten verfügbaren Platz auf der Hauptachse auszufüllen.
align-content
Die CSS-Eigenschaft "align-content" definiert die Ausrichtung und Positionierung von Zeilen oder Spalten entlang der Kreuzachse innerhalb eines Flex-Containers, wenn es mehrere Zeilen oder Spalten gibt. Sie ermöglicht die Kontrolle über den Abstand zwischen den Zeilen oder Spalten und den verfügbaren Platz auf der Kreuzachse.
Es stehen verschiedene Werte zur Verfügung, darunter:
"flex-start": Die Zeilen oder Spalten werden am Anfang der Kreuzachse positioniert.
"flex-end": Die Zeilen oder Spalten werden am Ende der Kreuzachse positioniert.
"center": Die Zeilen oder Spalten werden in der Mitte der Kreuzachse zentriert.
"space-between": Die Zeilen oder Spalten werden gleichmäßig über den verfügbaren Platz auf der Kreuzachse verteilt, wobei der erste und letzte Abstand zur Containerkante bleibt.
"space-around": Die Zeilen oder Spalten werden gleichmäßig über den verfügbaren Platz auf der Kreuzachse verteilt, wobei gleiche Abstände sowohl vor dem ersten als auch nach dem letzten Element entstehen.
"stretch": Die Zeilen oder Spalten werden gestreckt, um den gesamten verfügbaren Platz auf der Kreuzachse auszufüllen.
align-items
Die CSS-Eigenschaft "align-items" definiert die Ausrichtung und Positionierung der Flex-Elemente entlang der Kreuzachse innerhalb eines Flex-Containers. Sie ermöglicht die Kontrolle über die vertikale Ausrichtung der Elemente.
Es stehen verschiedene Werte zur Verfügung, darunter:
"flex-start": Die Elemente werden am Anfang der Kreuzachse positioniert.
"flex-end": Die Elemente werden am Ende der Kreuzachse positioniert.
"center": Die Elemente werden vertikal in der Mitte der Kreuzachse zentriert.
"baseline": Die Elemente werden anhand ihrer Grundlinie ausgerichtet.
"stretch": Die Elemente werden gestreckt, um den gesamten verfügbaren Platz auf der Kreuzachse auszufüllen.
Eigenschaften der Flex-Items
Flex-Shrink: "flex-shrink" ist eine Eigenschaft, die das Verhalten der Flex-Elemente beim Verkleinern des Containerbereichs steuert. Mit "flex-shrink" kann man festlegen, wie stark ein Flex-Element schrumpfen soll, um Platz für andere Elemente zu machen. Je höher der Wert, desto mehr wird das Element schrumpfen.
Flex-Grow: "flex-grow" ist eine Eigenschaft, mit der die Größenverteilung der Flex-Elemente gesteuert werden kann. Sie definiert das Verhältnis, in dem die verfügbare Breite auf die Elemente aufgeteilt wird. Ein höherer Wert für "flex-grow" bedeutet, dass das Element mehr Platz einnimmt und wächst.
Flex-Basis: "flex-basis" gibt die Ausgangsgröße der Flex-Elemente an, bevor der Platz verteilt wird. Sie kann als feste Breite oder prozentualer Anteil des Containerbereichs definiert werden. "flex-basis" wird oft in Kombination mit "flex-grow" und "flex-shrink" verwendet, um das Verhalten der Elemente zu steuern.
Abstände in Flex-Containern: Flexbox bietet auch eine einfache Möglichkeit, Abstände zwischen den Elementen zu erstellen. Durch die Verwendung von "margin" oder der speziellen Eigenschaft "gap" können Abstände zwischen den Flex-Elementen festgelegt werden. Dadurch wird das Hinzufügen von Lücken oder das gleichmäßige Verteilen von Elementen erleichtert.
Die "display: flex"-Eigenschaft bietet eine effiziente Möglichkeit, komplexe Layouts zu erstellen und die Ausrichtung, Verteilung und Größenanpassung von Elementen zu steuern. Flexbox vereinfacht das Responsive Webdesign und bietet eine optimale Lösung für unterschiedliche Bildschirmgrößen und Geräte. Durch die Verwendung von "flex-shrink", "flex-grow" und "flex-basis" können Elemente flexibel angepasst und gestaltet werden, um ein ansprechendes und anpassungsfähiges Layout zu erreichen.