Was ist Flexbox?

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy. Lektion 44 von 76.

In CSS ist das Flexbox-Layout ein leistungsstarkes Werkzeug, das eine effiziente Möglichkeit bietet, den Raum zwischen items in einem container zu align. Mit Flexbox kannst du die Ausrichtung, direction, Reihenfolge und Größe von Elementen innerhalb eines container steuern und flexible sowie dynamische Layouts erstellen, die sich an verschiedene Bildschirmgrößen und Geräte anpassen.

Um Flexbox zu verwenden, musst du zunächst einen flex container definieren. Dazu wird die display-Eigenschaft eines Elements auf flex oder inline-flex gesetzt. Sobald du einen flex container erstellt hast, werden seine direkten untergeordneten Elemente automatisch zu flex items.

Hier ist die grundlegende Syntax zum Erstellen eines flex-Containers:

.container {
    display: flex;
}

display: flex;: Diese Deklaration verwandelt das ausgewählte Element in einen flex-Container und seine direkten untergeordneten Elemente in flex-Elemente.

Sobald du einen flex-Container hast, kannst du verschiedene Flexbox-Eigenschaften verwenden, um das Layout seiner flex-Elemente zu steuern. Zu den am häufigsten verwendeten Eigenschaften gehören:

flex-direction: Gibt die Richtung der flex-Elemente an (row, column, row-reverse, column-reverse).
justify-content: Richtet die flex-Elemente entlang der Hauptachse aus (z. B. flex-start, flex-end, center, space-between, space-around).

align-items: Richtet die flex-Elemente entlang der Querachse aus (z. B. flex-start, flex-end, center, baseline, stretch).
flex-wrap: Legt fest, ob die flex-Elemente auf mehrere Zeilen umgebrochen werden sollen (wrap, nowrap, wrap-reverse).
align-content: Richtet die flex-Zeilen aus, wenn auf der Querachse zusätzlicher Platz vorhanden ist (ähnlich wie justify-content, aber für mehrere Zeilen).

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einer Division (<div>), die drei untergeordnete Divisionen (<div>) enthält. Deine Aufgabe besteht darin, die Eigenschaft display: flex; zu verwenden, um die übergeordnete Division in einen Flex-Container umzuwandeln. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse container abzielt.
Setze die Eigenschaft display des Elements .container auf flex.

Probier es selbst

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>