Flexbox
Flexbox ist eine Layouttechnik in CSS, mit der Sie flexible und reaktionsschnelle Layouts erstellen können. Die Hauptidee hinter Flexbox besteht darin, einen Container (Parent) zu erstellen, der seine Kinder (Elemente im Inneren) in Zeilen oder Spalten anordnet und deren Größe automatisch anpasst, um den verfügbaren Platz gleichmäßig auszufüllen.
Flex-Container (Parent)
Stellen Sie sich den Flex-Container wie ein Tablett vor, auf dem Sie Objekte platzieren. Es ist das Elternteil, das steuert, wie die Objekte darin angeordnet werden. Um die Flexbox-Funktionalität für einen Container zu aktivieren, müssen Sie ihm die Eigenschaft display: flex; zuweisen. Mit dieser Option wird den Kindern mitgeteilt, dass sie die Flexbox-Regeln befolgen müssen.
Die Achsen
Flexbox arbeitet mit zwei Achsen: der Hauptachse (main axis) und der Querachse (cross axis).
Die Hauptachse kann horizontal (von links nach rechts) oder vertikal (von oben nach unten) verlaufen, während die Querachse senkrecht zur Hauptachse steht.
Hier ein Beispiel, wenn die Hauptachse horizontal ist :
Elemente ausrichten
Mit Eigenschaften wie justify-content für die Hauptachse und align-items für die Querachse können Sie steuern, wie die Elemente im Container verteilt werden. Sie können die verschiedenen Werte dieser Eigenschaften hier testen: Interactive flexbox guide
Abstand zwischen den Elementen
Die Eigenschaft gap kann verwendet werden, um den Abstand zwischen den Elementen einzustellen.
