Inhalt 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 angeordnet werden. Sie hilft dabei, Elemente auszurichten und zusätzlichen Platz zu verteilen, wenn noch Platz 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 Eigenschaft justify-content:

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

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

flex-start: Dies ist der Standardwert. Die Elemente werden zum Anfang der Zeile hin angeordnet.

flex-end: Die Elemente werden zum Ende der Zeile hin angeordnet.

center: Elemente werden entlang der Linie zentriert.

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

space-around: Die Elemente werden gleichmäßig entlang der Linie verteilt, mit gleich viel Abstand um sie herum.

space-evenly: Die Elemente werden so verteilt, dass der Abstand zwischen jeweils zwei 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 Element .container-start seine Flex-Elemente am Anfang der Hauptachse aus, das Element .container-center zentriert seine Flex-Elemente entlang der Hauptachse.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit zwei Bereichen (<div>) gegeben, die jeweils drei untergeordnete Bereiche (<div>) enthalten. Die übergeordneten Bereiche wurden bereits mit display: flex; als Flex-Container festgelegt. Deine Aufgabe ist es, die Flex-Elemente mithilfe der Eigenschaft justify-content entlang der Hauptachse auszurichten. Befolge die folgenden Schritte:

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>