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

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

Во всех примерах, рассмотренных раньше, флекс-контейнер был однострочным, ведь перенос флекс-элементов на новую строку по умолчанию запрещён — работает flex-wrap: nowrap;.

А как будут растягиваться и сжиматься элементы в многострочном контейнере, с flex-wrap: wrap;?

В таком контейнере свойство flex-shrink будет работать как обычно, но необходимость в нём будет возникать намного реже. Ведь при нехватке места в строке флекс-элементы будут переноситься на новую строку.

Но если появятся флекс-элементы, базовый размер которых больше размера флекс-контейнера, то такие элементы будут сжиматься и занимать целую строку. Наверное, это единственный случай, когда flex-shrink делает что-то полезное в многострочном контейнере.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Многострочный флекс-контейнер и flex-shrink</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: 100px; flex-shrink: 1; }
HTML Academy
  1. Увеличьте базовый размер всех скейтбордов до 500px.
  2. Разрешите перенос флекс-элементов на новую строку в блоке .spot.
  3. Затем задайте всем скейтам нулевой коэффициент сжатия.
Теория Проверить Следующее задание

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

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

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

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