Was ist eine Flexbox?

Teil des Abschnitts Styling mit 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, Elemente in einem Container auszurichten und den verfügbaren Platz unter ihnen aufzuteilen. Mit Flexbox kannst du die Ausrichtung, Richtung, Reihenfolge und Größe von Elementen innerhalb eines Containers steuern und so flexible und dynamische Layouts erstellen, die sich an unterschiedliche Bildschirmgrößen und Geräte anpassen.

Um Flexbox zu verwenden, musst du zuerst einen Flex-Container definieren. Dazu setzt du die Eigenschaft display eines Elements auf flex oder inline-flex. Sobald du einen Flex-Container erstellt hast, werden seine direkten Kinder automatisch zu Flex-Elementen.

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

.container {
    display: flex;
}

display: flex;: Diese Deklaration macht das ausgewählte Element zu einem Flex-Container und seine direkten Kinder zu Flex-Elementen.

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: Steuert, 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 einem Div-Element (<div>), das drei untergeordnete Div-Elemente (<div>) enthält. Deine Aufgabe ist es, die Eigenschaft display: flex; zu verwenden, um das übergeordnete Div-Element 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>