Флексбокс, часть 1 / Выравнивание элементов по базовой линии [9/31]
×

Выравнивание элементов по базовой линии [9/31]

Ещё одно значение свойства align-items — это baseline. Если задать его контейнеру, то флекс-элементы будут выравниваться по базовой линии текста в них. Эта воображаемая линия проходит по нижней части букв.

Если выровнять флекс-элементы по базовой линии, то они выстроятся так, чтобы текст в них был как бы на «одной строке».

Чтобы лучше понять поведение baseline, сравним его с другим значением — flex-start.

Мини-итог. Свойство align-items управляет выравниванием элементов вдоль поперечной оси и имеет пять значений:

  • значение по умолчанию stretch,

  • flex-start,

  • flex-end,

  • center,

  • baseline.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Выравнивание элементов по базовой линии</title> <base href="/assets/course96/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="house"> <div class="room room-1"> <div class="rug text-rudolf"> <p>Рудольф</p> </div> <div class="rug text-keks"> <p>Кекс</p> </div> <div class="rug text-simeon"> <p>Семён</p> </div> </div> <div class="room room-2"> <div class="rug text-rudolf"> <p>Рудольф</p> </div> <div class="rug text-keks"> <p>Кекс</p> </div> <div class="rug text-simeon"> <p>Семён</p> </div> </div> </body> </html>
.room { display: flex; height: 150px; justify-content: center; } .room-1 { align-items: center; } .room-2 { align-items: center; } .rug { min-height: auto; } .rug p { margin: 30px 0; text-align: center; background-color: rgba(69, 185, 244, 0.25); }
HTML Academy
  1. Для блока .room-1 задайте выравнивание флекс-элементов в начале поперечной оси,
  2. а для блока .room-2 выравнивание по базовой линии текста.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #12, который стартует 18 сентября.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.