Align Items

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 47 из 76.

В CSS свойство align-items управляет выравниванием флекс-элементов вдоль поперечной оси (противоположной главной оси). Оно помогает позиционировать элементы вертикально в строке или горизонтально в колонке. Это свойство полезно для создания более гибких и адаптивных макетов.

Вот базовый синтаксис для использования свойства align-items:

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

value: Желаемое выравнивание для flex-элементов вдоль поперечной оси, которое может быть одним из следующих:

stretch: Это значение по умолчанию. Flex-элементы растягиваются, чтобы заполнить контейнер вдоль поперечной оси, соблюдая при этом min-width/max-width и min-height/max-height.

flex-start: Flex-элементы располагаются в начале поперечной оси.

flex-end: Flex-элементы располагаются в конце поперечной оси.

center: Flex-элементы центрируются вдоль поперечной оси.

baseline: Flex-элементы выравниваются так, чтобы их базовые линии совпадали.

Например:

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

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

В этом примере элемент .container-start будет выравнивать свои flex-элементы по началу поперечной оси, а элемент .container-center будет центрировать свои flex-элементы вдоль поперечной оси.

Задание

Легко

Вам предоставлен HTML-документ с двумя блоками (<div>), каждый из которых содержит три дочерних блока.

Выполните следующие шаги:

Стилизуйте элемент <strong>.seas</strong>:
- Напишите CSS-правило для элемента <div> с классом .seas.
- Установите свойство display в значение flex, чтобы включить гибкое позиционирование дочерних элементов.
- Установите свойство align-items в значение center, чтобы выровнять flex-элементы по центру поперечной оси.
Стилизуйте элемент <strong>.oceans</strong>:
- Напишите CSS-правило для элемента <div> с классом .oceans.
- Установите свойство display в значение flex, чтобы включить гибкое позиционирование дочерних элементов.
- Установите свойство align-items в значение flex-end, чтобы выровнять flex-элементы в конце поперечной оси.

Шпаргалка

Свойство align-items управляет выравниванием флекс-элементов вдоль поперечной оси (перпендикулярно главной оси):

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

Доступные значения:

stretch: По умолчанию. Элементы растягиваются, чтобы заполнить контейнер
flex-start: Элементы располагаются в начале поперечной оси
flex-end: Элементы располагаются в конце поперечной оси
center: Элементы центрируются вдоль поперечной оси
baseline: Элементы выравниваются по их базовой линии

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

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

Попробуйте сами

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