Align Items

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

W CSS właściwość align-items określa, jak elementy flex są wyrównywane wzdłuż osi poprzecznej (przeciwnej do osi głównej). Pomaga ustawiać elementy pionowo w wierszu lub poziomo w kolumnie. Ta właściwość przydaje się do tworzenia bardziej elastycznych i responsywnych układów.

Oto podstawowa składnia używania właściwości align-items:

.container {
    display: flex;
    align-items: value;
}

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

stretch: To wartość domyślna. Elementy flex są rozciągane, aby wypełnić kontener wzdłuż osi poprzecznej, z uwzględnieniem min-width/max-width i min-height/max-height.

flex-start: Elementy flex są umieszczane na początku osi poprzecznej.

flex-end: Elementy flex są umieszczane na końcu osi poprzecznej.

center: Elementy flex są wyśrodkowane wzdłuż osi poprzecznej.

baseline: Elementy flex są wyrównane tak, aby ich linie bazowe się pokrywały.

Na przykład:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

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

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z dwoma elementami (<div>), z których każdy zawiera trzy elementy potomne.

Wykonaj poniższe kroki:

Stylizuj element <strong>.seas</strong>:
- Napisz regułę CSS, która wybiera element <div> z klasą .seas.
- Ustaw display na flex, aby umożliwić elastyczne rozmieszczanie elementów potomnych.
- Ustaw właściwość align-items na center, aby wyrównać elementy flex na środku osi poprzecznej.
Stylizuj element <strong>.oceans</strong>:
- Napisz regułę CSS, która wybiera element <div> z klasą .oceans.
- Ustaw display na flex, aby umożliwić elastyczne rozmieszczanie elementów potomnych.
- Ustaw właściwość align-items na flex-end, aby wyrównać elementy flex na końcu osi poprzecznej.

Spróbuj swoich sił

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>