Флексбокс, часть 1 / Эгоистичное выравнивание, align-self [10/31]
×

Эгоистичное выравнивание, align-self [10/31]

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

C поперечной осью всё проще. Можно сказать, что у каждого элемента она своя, и можно задавать им разное поперечное выравнивание. Для этого используется свойство align-self, которое задаётся для самих флекс-элементов, а не для флекс-контейнера.

У свойства align-self те же самые значения, что и у align-items.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Эгоистичное выравнивание, align-self</title> <base href="/assets/course96/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug rudolf"></div> <div class="rug keks"></div> <div class="rug simeon"></div> </div> </body> </html>
.room { display: flex; justify-content: center; align-items: stretch; }
HTML Academy
  1. Для коврика Рудольфа .rudolf задайте выравнивание в начале поперечной оси,
  2. для Кекса .keks — в конце поперечной оси,
  3. а для Семёна .simeon — по центру оси center.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #18, который стартует 7 августа.

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

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

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

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