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 Platz zwischen Elementen in einem Container auszurichten und zu verteilen. Mit Flexbox können Sie 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, müssen Sie zuerst einen Flex-Container definieren. Dies geschieht, indem Sie die Eigenschaft display eines Elements auf flex oder inline-flex setzen. Sobald Sie einen Flex-Container erstellt haben, werden dessen direkte Kindelemente automatisch zu Flex-Items.

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 Kindelemente zu Flex-Items.

Sobald Sie einen Flex-Container haben, können Sie verschiedene Flexbox-Eigenschaften verwenden, um das Layout seiner Flex-Elemente zu steuern. Einige der am häufigsten verwendeten Eigenschaften sind:

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: Steuert, ob die Flex-Elemente auf mehrere Zeilen umgebrochen werden sollen (wrap, nowrap, wrap-reverse).
align-content: Richtet die Flex-Zeilen aus, wenn zusätzlicher Platz in der Querachse vorhanden ist (ähnlich wie justify-content, aber für mehrere Zeilen).

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem Bereich (<div>), der drei untergeordnete Bereiche (<div>) enthält. Ihre Aufgabe ist es, die Eigenschaft display: flex; zu verwenden, um den übergeordneten Bereich in einen Flex-Container zu verwandeln. Folgen Sie den unten stehenden Schritten:

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

Spickzettel

Um einen Flex-Container zu erstellen, setzen Sie die display-Eigenschaft auf flex:

.container {
    display: flex;
}

Dies macht das Element zu einem Flex-Container und seine direkten Kindelemente zu Flex-Items.

Häufige Flexbox-Eigenschaften zur Steuerung des Layouts:

flex-direction: Richtung der Flex-Items (row, column, row-reverse, column-reverse)
justify-content: Richtet Elemente entlang der Hauptachse aus (flex-start, flex-end, center, space-between, space-around)
align-items: Richtet Elemente entlang der Querachse aus (flex-start, flex-end, center, baseline, stretch)
flex-wrap: Steuert den Zeilenumbruch (wrap, nowrap, wrap-reverse)
align-content: Richtet Flex-Zeilen aus, wenn zusätzlicher Platz in der Querachse vorhanden ist

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>