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 zwischen ihnen zu verteilen. 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 verschiedene Bildschirmgrößen und Geräte anpassen.

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

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: 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

Dir liegt ein HTML-Dokument mit einem Bereich (<div>) vor, der drei untergeordnete Bereiche (<div>) enthält. Deine Aufgabe besteht darin, die Eigenschaft display: flex; zu verwenden, um den übergeordneten Bereich 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 display-Eigenschaft 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>