Inhalte ausrichten

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 46 von 76.

In CSS steuert die Eigenschaft justify-content, wie Flex-Elemente entlang der Hauptachse eines Flex-Containers verteilt werden. Sie hilft dabei, Elemente auszurichten und zusätzlichen Platz zu verteilen, wenn noch Raum vorhanden ist. Diese Eigenschaft ist nützlich, um Elemente horizontal (in einer Zeile) oder vertikal (in einer Spalte) zu positionieren und Layouts dadurch flexibler und responsiver zu gestalten.

Hier ist die grundlegende Syntax für die Verwendung der justify-content-Eigenschaft:

.container {
    display: flex;
    justify-content: value;
}

value: Die gewünschte Ausrichtung der Flex-Elemente entlang der Hauptachse, die eine der folgenden sein kann:

flex-start: Dies ist der Standardwert. Elemente werden am Anfang der Zeile angeordnet.

flex-end: Elemente werden am Ende der Zeile angeordnet.

center: Elemente werden entlang der Linie zentriert.

space-between: Elemente sind gleichmäßig entlang der Zeile verteilt, wobei das erste Element am Anfang und das letzte Element am Ende steht.

space-around: Elemente sind gleichmäßig entlang der Zeile verteilt, mit gleichem Platz um sie herum.

space-evenly: Elemente werden so verteilt, dass der Abstand zwischen zwei beliebigen Elementen (und der Abstand zu den Rändern) gleich ist.

Zum Beispiel:

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

In diesem Beispiel richtet das .container-start-Element seine Flex-Elemente am Anfang der Hauptachse aus, das .container-center-Element zentriert seine Flex-Elemente entlang der Hauptachse.

Aufgabe

Einfach

Dir liegt ein HTML-Dokument mit zwei Bereichen (<div>) vor, die jeweils drei untergeordnete Bereiche (<div>) enthalten. Die übergeordneten Bereiche wurden bereits mithilfe von display: flex; als Flex-Container festgelegt. Deine Aufgabe besteht darin, die Eigenschaft justify-content zu verwenden, um die Flex-Elemente entlang der Hauptachse auszurichten. Führe die folgenden Schritte aus:

Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse fruits abzielt.
Setze die Eigenschaft justify-content des Elements .fruits auf center, um die Flex-Elemente entlang der Hauptachse zu zentrieren.
Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse vegetables abzielt.
Setze die Eigenschaft justify-content des Elements .vegetables auf space-between, um die Flex-Elemente entlang der Hauptachse zu verteilen.

Probier es selbst

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>