Justify Content

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 46 z 76.

W CSS właściwość justify-content określa rozmieszczenie elementów flex wzdłuż głównej osi kontenera flex. Pomaga wyrównywać elementy i rozdzielać dodatkową przestrzeń, gdy jest jeszcze wolne miejsce. Ta właściwość przydaje się do rozmieszczania elementów w poziomie (w wierszu) lub w pionie (w kolumnie), dzięki czemu układy są bardziej elastyczne i responsywne.

Oto podstawowa składnia użycia właściwości justify-content:

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

value: Żądane wyrównanie elementów flex wzdłuż osi głównej, które może być jednym z następujących:

flex-start: To wartość domyślna. Elementy są rozmieszczane na początku wiersza.

flex-end: Elementy są rozmieszczane przy końcu wiersza.

center: Elementy są wyśrodkowane wzdłuż linii.

space-between: Elementy są równomiernie rozmieszczone wzdłuż linii, przy czym pierwszy element znajduje się na początku, a ostatni na końcu.

space-around: Elementy są równomiernie rozmieszczone wzdłuż linii, z jednakową ilością wolnego miejsca wokół nich.

space-evenly: Elementy są rozmieszczone tak, aby odstępy między dowolnymi dwoma elementami (oraz od krawędzi) były równe.

Na przykład:

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

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

W tym przykładzie element .container-start wyrówna elementy flex do początku osi głównej, a element .container-center wyśrodkuje swoje elementy flex wzdłuż osi głównej.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z dwoma elementami (<div>), które zawierają po trzy elementy potomne (<div>). Elementy nadrzędne zostały już ustawione jako kontenery flex za pomocą display: flex;. Twoim zadaniem jest użycie właściwości justify-content, aby wyrównać elementy flex wzdłuż osi głównej. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> z klasą fruits.
Ustaw właściwość justify-content elementu .fruits na center, aby wyśrodkować elementy flex wzdłuż osi głównej.
Napisz regułę CSS, która wybiera element <div> z klasą vegetables.
Ustaw właściwość justify-content elementu .vegetables na space-between, aby rozmieścić elementy flex wzdłuż osi głównej.

Spróbuj swoich sił

<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>