Флексбокс, часть 1 / Перенос в обратном порядке [14/31]
×

Перенос в обратном порядке [14/31]

Если перенос флекс-элементов разрешён, то ряды элементов располагаются вдоль поперечной оси. Первый ряд располагается в начале поперечной оси, а последний в конце. Но так работает только значение wrap.

Если для flex-wrap задать значение wrap-reverse, то элементы будут переноситься, а ряды будут располагаться в обратном порядке: первый в конце поперечной оси, а последний в начале.

Давайте добавим в комнату ещё котиков и попробуем переносить их на новую строку в обратном поперечной оси направлению.


Выполнить задание
<!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"> <div class="rug simeon"></div> <div class="rug rudolf"></div> <div class="rug keks"></div> <div class="rug massimo"></div> </div> </body> </html>
.room { display: flex; flex-wrap: wrap; } .rug { width: 120px; }
HTML Academy
  1. Добавьте ещё двух котов: Марти — блок с классами rug и marty и Черныша — блок с классами rug и blacky,
  2. затем для .room задайте перенос флекс-элементов на новую строку в обратном направлении wrap-reverse,
  3. а потом задайте всем коврикам ширину 180px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый PHP #2, который стартует 22 августа.

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

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

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

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