Justify Content

Teil des Abschnitts Styling with 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, wodurch Layouts flexibler und responsiver werden.

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

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

value: Die gewünschte Ausrichtung für die Flex-Elemente entlang der Hauptachse, die einer der folgenden Werte 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 wird das .container-start-Element seine Flex-Elemente am Anfang der Hauptachse ausrichten, das .container-center-Element wird seine Flex-Elemente entlang der Hauptachse zentrieren.

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit zwei Bereichen (<div>), die drei untergeordnete Bereiche (<div>) enthalten. Die übergeordneten Bereiche wurden bereits mit display: flex; als Flex-Container festgelegt. Ihre Aufgabe ist es, die Eigenschaft justify-content zu verwenden, um die Flex-Elemente entlang der Hauptachse auszurichten. Befolgen Sie die folgenden Schritte:

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

Spickzettel

Die Eigenschaft justify-content steuert, wie Flex-Elemente entlang der Hauptachse eines Flex-Containers verteilt werden:

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

Verfügbare Werte:

flex-start: Elemente werden zum Anfang hin ausgerichtet (Standard)
flex-end: Elemente werden zum Ende hin ausgerichtet
center: Elemente werden entlang der Linie zentriert
space-between: Elemente werden gleichmäßig verteilt, das erste am Anfang, das letzte am Ende
space-around: Elemente werden gleichmäßig verteilt mit gleichem Abstand um sie herum
space-evenly: Elemente werden mit gleichem Abstand zwischen zwei beliebigen Elementen verteilt

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

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

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>