Флексбокс, часть 2 / Многострочный флекс-контейнер и flex-grow [17/28]
×

Многострочный флекс-контейнер и flex-grow [17/28]

В отличие от flex-shrink, свойство flex-grow в многострочном флекс-контейнере срабатывает намного чаще и пользы приносит намного больше.

В каждой строке такого контейнера может быть свободное место и механизм перераспределения этого места работает построчно.

Поэтому возможность «растянуть» флекс-элементы, чтобы строки заполнялись по ширине полностью, будет возникать достаточно часто.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Многострочный флекс-контейнер и flex-grow</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="world"> <div class="spot"> <div class="skate racoon-pink"></div> <div class="skate racoon-gray"></div> <div class="skate racoon-orange"></div> </div> </body> </html>
.spot { display: flex; width: 450px; height: auto; flex-wrap: nowrap; } .skate { flex-basis: 120px; } .racoon-green { }
HTML Academy
  1. Добавьте на полянку .spot последним скейт с Зелёным Енотом — див с классами skate и racoon-green.
  2. Блоку .spot задайте перенос флекс-элементов на новую строку,
  3. а затем зелёному еноту коэффициент растягивания 1.
  4. И, наконец, после Зелёного Енота добавьте скейт с Коричневым Енотом — див с классами skate и racoon-brown.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый JavaScript #3, который стартует 26 сентября.

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

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

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

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