Флексбокс, часть 1 / Порядковый номер флекс-элемента, order [19/31]
×

Порядковый номер флекс-элемента, order [19/31]

И ещё одно свойство, которое мы рассмотрим в этом курсе, — это order, порядковый номер флекс-элемента.

Это очень полезное свойство, так как с его помощью можно менять порядок следования флекс-элементов в потоке, не меняя HTML-код.

По умолчанию порядковый номер флекс-элементов равен 0, а сортировка элементов производится по возрастанию номера.

Порядковый номер задаётся целым числом, положительным или отрицательным. Например:

.flex-element {
    order: -1; /* этот элемент станет отображаться первым в контейнере */
}

Давайте попробуем перетасовать коврики с котиками с помощью свойства order.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Порядковый номер флекс-элемента, order</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"> <span>Рудольф</span> </div> <div class="rug marty"> <span>Марти</span> </div> <div class="rug simeon"> <span>Семён</span> </div> <div class="rug keks"> <span>Кекс</span> </div> </div> </body> </html>
.room { display: flex; align-items: center; }
HTML Academy
  1. Для коврика Кекса .keks задайте порядковый номер -1,
  2. затем для коврика Семёна .simeon — порядковый номер -2,
  3. а для коврика Рудольфа .rudolf — номер 1.
Теория Проверить Следующее задание

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

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

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

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