Kierunek flex

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

W CSS właściwość flex-direction określa kierunek rozmieszczenia elementów wewnątrz kontenera flex. Decyduje, czy elementy są ułożone w wierszu, czy w kolumnie.

Wpływa to również na sposób działania właściwości takich jak justify-content i align-items. Prawidłowe użycie flex-direction pomaga tworzyć elastyczne i responsywne układy.

Oto podstawowa składnia użycia właściwości flex-direction:

.container {
    display: flex;
    flex-direction: value;
}

value: Żądany kierunek elementów flex, który może być jednym z następujących:

row: To wartość domyślna. Elementy Flex są ułożone w wierszu, od lewej do prawej. Oś główna jest pozioma, a oś poprzeczna — pionowa.

row-reverse: Elementy flex są umieszczane w rzędzie, od prawej do lewej. Oś główna jest pozioma, a oś poprzeczna pionowa.

column: Elementy flex są rozmieszczane w kolumnie, od góry do dołu. Oś główna jest pionowa, a oś poprzeczna — pozioma.

column-reverse: Elementy flex są rozmieszczane w kolumnie, od dołu do góry. Oś główna jest pionowa, a oś poprzeczna jest pozioma.

Na przykład:

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

W tym przykładzie element .container-row wyświetli swoje elementy flex w wierszu od lewej do prawej, a element .container-row-reverse wyświetli je od prawej do lewej.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z dwoma nadrzędnymi elementami <strong><div></strong>, z których każdy zawiera trzy podrzędne elementy <strong><div></strong>. Nadrzędne elementy <div> zostały już ustawione jako kontenery flex za pomocą display: flex;. Twoim zadaniem jest użycie właściwości flex-direction, aby zmienić układ elementów flex.

Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> o klasie container1.
- Ustaw jego właściwość flex-direction na column, aby ułożyć elementy flex w pionowej kolumnie.
Napisz regułę CSS, która wybiera element <div> o klasie container2.
- Ustaw jego właściwość flex-direction na column-reverse, aby ułożyć elementy flex w odwróconej kolumnie.

Spróbuj swoich sił

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>