Flexbox Layout: So verteilst du Kindelemente gleichmäßig

Flexbox ist ein leistungsfähiges Layout-Modul in CSS, das dir hilft, den verfügbaren Platz innerhalb eines Containers effizient zu nutzen. In diesem Tutorial wirst du lernen, wie du Kindelemente in einem Flex-Container gleichmäßig verteilen kannst. Dies ist besonders nützlich für responsive Designs, bei denen sich die Breite des Fensters ändern kann. Lass uns gleich einsteigen!

Wichtigste Erkenntnisse

• Mit Flexbox lassen sich Kindelemente im Layout gleichmäßig verteilen, indem die Flex-Werte der Elemente entsprechend eingestellt werden.
• Du kannst die Breite und Höhe der Kindelemente flexibel gestalten, sodass sie sich automatisch an den verfügbaren Platz anpassen, ohne feste Maße verwenden zu müssen.

Schritt-für-Schritt-Anleitung

Um zu verstehen, wie du Kindelemente in einem Flex-Container gleichmäßig verteilen kannst, folge diesen Schritten:

Zuerst erstellst du einen Flex-Container, indem du die CSS-Eigenschaft display: flex; anwendest. Hier siehst du ein einfaches Beispiel, wie du das machen kannst. Stelle sicher, dass der Container im row-Format ausgerichtet ist:

In diesem Zustand wird der Platz gleichmäßig auf alle Kindelemente verteilt, solange diese Kindelemente keine festen Breiten haben. Wenn du die Breite der Kindelemente festlegst und sie dann auf 100 Pixel setzt, werden diese zwar gleichmäßig im Container verteilt, aber das ist nicht optimal für ein responsives Design:

Wenn du die festen Breiten entfernst, siehst du schnell, dass der Platz dramatisch reduziert wird, vor allem wenn der Text in den Kindelementen nicht vorhanden ist. In diesem Fall kollabiert alles auf die minimale Breite, die durch den Text definiert wird:

Um den verfügbaren Platz gleichmäßig zu verteilen, musst du den Flex-Wert für die Kindelemente setzen. Dies erfolgt bequem durch die Anwendung der flex-Eigenschaft, die dir erlaubt, einen proportionellen Anteil des verfügbaren Platzes zu definieren. Setze den Flex-Wert jeder Kindelement auf 1:

Wenn du das gemacht hast, siehst du, dass alle Kindelemente den Platz gleichmäßig verteilt haben. Hierbei handelt es sich um eine sehr flexible Lösung, da sie sich dynamisch an die Breite des Containers anpasst:

Du kannst auch die Flex-Werte variieren, um unterschiedliche Anteile zu schaffen. Wenn beispielsweise das erste Element die Hälfte des Platzes bekommen soll, könntest du es auf flex: 2; setzen, während die anderen Elemente flex: 1; behalten:

Nachdem du die Werte angepasst hast, werden die Kindelemente gemäß den eingestellten Werten verteilt. Durch die flexiblen Anteile, die du zugewiesen hast, erhält das erste Element mehr Platz als die anderen:

Wenn du die Breite des Containers änderst, bleiben die Verhältnisse stabil. Egal, ob du die Breite auf 800 Pixel oder 400 Pixel änderst, die Kindelemente passen sich automatisch an und verteilen den Platz gleichmäßig basierend auf den vorher festgelegten Flex-Werten:

Du kannst die Flexbox-Eigenschaften auch leicht anpassen, indem du die flex-direction-Eigenschaft änderst. Wenn du den Flex-Container beispielsweise von row zu column änderst, bleibt die Logik der Verteilung gleich. Die Kindelemente werden dann vertikal angeordnet:

Stelle sicher, dass die Höhe der Kindelemente nicht festgelegt ist, um die Flexibilität zu bewahren. Dies funktioniert besonders gut für responsive Designs, da die Kindelemente sich je nach Bildschirmgröße und -orientierung anpassen:

Auf diese Weise kannst du ein stark responsives Layout erstellen, womit du sicherstellen kannst, dass dein Design sowohl auf Desktop als auch mobiler Ansicht hervorragend aussieht.

Zusammenfassung

In diesem Tutorial hast du gelernt, wie du Flexbox in CSS und HTML einsetzt, um Kindelemente gleichmäßig zu verteilen. Dank der Flex-Eigenschaften kannst du responsive Layouts erstellen, die sich nahtlos an verschiedene Bildschirmgrößen und -formate anpassen.