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, mit dem sich Elemente in einem Container effizient ausrichten und der verfügbare Platz zwischen ihnen verteilen lässt. Mit Flexbox kannst du die Ausrichtung, Richtung, Reihenfolge und Größe von Elementen innerhalb eines Containers steuern und so flexible, 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 Kind-Elemente automatisch zu Flex-Elementen.

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

.container {
    display: flex;
}

display: flex;: Diese Deklaration wandelt das ausgewählte Element in einen Flex-Container und seine direkten Kindelemente in Flex-Elemente um.
display: inline-flex;: Erstellt einen Inline-Flex-Container: Das Element verhält sich wie ein Inline-Element, aber seine Kindelemente werden zu Flex-Elementen mit allen Flexbox-Funktionen.

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: Legt die Richtung der Flex-Elemente fest (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 einem Bereich (<div>), der drei untergeordnete Bereiche (<div>) enthält. Deine Aufgabe ist es, die übergeordnete Division mit der Eigenschaft display: flex; in einen Flex-Container umzuwandeln. Folge den nachstehenden Schritten:

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>