Выравнивание элементов

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

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

Вот базовый синтаксис использования свойства 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 выровняет свои флекс-элементы по началу поперечной оси, а элемент .container-center расположит свои флекс-элементы по центру поперечной оси.

Задание

Легко

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

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

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

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

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