Флексбокс, часть 1 / Перенос флекс-элементов, flex-wrap [13/31]
×

Перенос флекс-элементов, flex-wrap [13/31]

Что будет, если флекс-элементов в контейнере станет больше, чем может уместиться в один ряд?

  • Они будут сжиматься до минимально возможной ширины.
  • Даже если им задать ширину явно, механизм флексбокса может её уменьшить.
  • Если они перестанут помещаться в контейнер и после уменьшения, то они выйдут за его пределы, но продолжат располагаться в один ряд.

Это чем-то похоже на поведение ячеек в таблице.

Такое поведение можно изменить свойством флекс-контейнера flex-wrap. По умолчанию оно имеет значение nowrap, то есть перенос флекс-элементов на новую строку запрещён.

Значение wrap разрешает перенос флекс-элементов на новую строку, если они не помещаются в контейнер.

Давайте посмотрим на практике, как оно работает.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Перенос флекс-элементов, flex-wrap</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> </body> </html>
.room { display: flex; } .rug { }
HTML Academy
  1. Коврикам .rug задайте ширину 120px,
  2. затем в блок .room последним добавьте кота Массимо: блок с классами rug и massimo,
  3. а после этого для .room задайте перенос флекс-элементов на новую строку.
Теория Проверить Следующее задание

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

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

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

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