Свойство flex-wrap: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии упражнений вы попрактикуетесь в использовании свойства `flex-wrap`. Это свойство управляет тем, будут ли flex-элементы переноситься на новую строку, если они не помещаются в одну строку flex-контейнера. Вы начнете с базовых значений `nowrap` (по умолчанию) и `wrap`, а затем перейдете к `wrap-reverse` и комбинациям с другими flex-свойствами. Задания построены от простого к сложному, чтобы помочь вам закрепить понимание того, как `flex-wrap` влияет на раскладку элементов.

Список тем

Запрет переноса элементов

В контейнере находятся несколько блоков. По умолчанию flex-элементы пытаются разместиться в одну строку. Ваша задача — явно указать контейнеру, чтобы он не переносил дочерние элементы на новую строку, даже если они не помещаются. Обратите внимание, как элементы выходят за пределы контейнера.

CSS

.container {
  display: flex;
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 300px; /* Ширина меньше суммы ширин блоков */
  margin: 15px;
  input1: input2;
}

.item {
  width: 80px;
  height: 50px;
  background-color: #0d6efd;
  color: white;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

                     .container {
  display: flex;
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 300px; /* Ширина меньше суммы ширин блоков */
  margin: 15px;
  input1: input2;
}

.item {
  width: 80px;
  height: 50px;
  background-color: #0d6efd;
  color: white;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

HTML

<div class="container">
  <div class="item">Блок 1</div>
  <div class="item">Блок 2</div>
  <div class="item">Блок 3</div>
  <div class="item">Блок 4</div>
  <div class="item">Блок 5</div>
</div>

Используйте свойство `flex-wrap` со значением `nowrap`. Это значение используется по умолчанию, но в данном упражнении его нужно указать явно для закрепления.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разрешение переноса элементов

В предыдущем задании элементы выходили за границы контейнера. Теперь ваша задача — изменить CSS таким образом, чтобы элементы, которые не помещаются в одну строку, автоматически переносились на следующую строку внутри контейнера.

CSS

.container {
  display: flex;
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 300px;
  margin: 15px;
  flex-wrap: input1;
}

.item {
  width: 80px;
  height: 50px;
  background-color: #198754;
  color: white;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

                     .container {
  display: flex;
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 300px;
  margin: 15px;
  flex-wrap: input1;
}

.item {
  width: 80px;
  height: 50px;
  background-color: #198754;
  color: white;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

HTML

<div class="container">
  <div class="item">Блок 1</div>
  <div class="item">Блок 2</div>
  <div class="item">Блок 3</div>
  <div class="item">Блок 4</div>
  <div class="item">Блок 5</div>
</div>

Чтобы разрешить перенос flex-элементов на следующую строку, используйте свойство `flex-wrap` со значением `wrap` для flex-контейнера.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обратный перенос элементов

Иногда требуется, чтобы перенос элементов происходил не на следующую строку снизу, а на строку сверху. Модифицируйте CSS-код контейнера так, чтобы новые строки с элементами добавлялись над предыдущими.

CSS

.container {
  display: flex;
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 300px;
  margin: 15px;
  input1: input2;
}

.item {
  width: 80px;
  height: 50px;
  background-color: #ffc107;
  color: black;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

                     .container {
  display: flex;
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 300px;
  margin: 15px;
  input1: input2;
}

.item {
  width: 80px;
  height: 50px;
  background-color: #ffc107;
  color: black;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

HTML

<div class="container">
  <div class="item">Блок 1</div>
  <div class="item">Блок 2</div>
  <div class="item">Блок 3</div>
  <div class="item">Блок 4</div>
  <div class="item">Блок 5</div>
</div>

Для осуществления переноса элементов на строки, расположенные выше предыдущих, примените к flex-контейнеру свойство `flex-wrap` со значением `wrap-reverse`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Включение Flexbox и переноса

Перед вами контейнер с элементами, но он еще не является flex-контейнером. Сделайте так, чтобы контейнер использовал flex-раскладку, а его дочерние элементы переносились на новую строку при необходимости.

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 250px;
  margin: 15px;
  input1: input2;
  input3: input4;
}

.item {
  width: 60px;
  height: 60px;
  background-color: #dc3545;
  color: white;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 250px;
  margin: 15px;
  input1: input2;
  input3: input4;
}

.item {
  width: 60px;
  height: 60px;
  background-color: #dc3545;
  color: white;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Элем 1</div>
  <div class="item">Элем 2</div>
  <div class="item">Элем 3</div>
  <div class="item">Элем 4</div>
  <div class="item">Элем 5</div>
  <div class="item">Элем 6</div>
</div>

Сначала сделайте контейнер flex-контейнером, установив свойство `display` в значение `flex`. Затем добавьте свойство `flex-wrap` со значением `wrap`, чтобы разрешить перенос элементов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Перенос изображений

В контейнере расположены несколько изображений. Настройте CSS таким образом, чтобы изображения вели себя как flex-элементы и переносились на следующую строку, если они все не помещаются в одну.

CSS

.image-gallery {
  display: input1;
  input2: input3;
  border: 2px solid #adb5bd;
  padding: 5px;
  max-width: 350px;
  margin: 15px;
}

.image-gallery img {
  width: 100px;
  height: 100px;
  margin: 5px;
  object-fit: cover;
  border: 1px solid #dee2e6;
}

                     .image-gallery {
  display: input1;
  input2: input3;
  border: 2px solid #adb5bd;
  padding: 5px;
  max-width: 350px;
  margin: 15px;
}

.image-gallery img {
  width: 100px;
  height: 100px;
  margin: 5px;
  object-fit: cover;
  border: 1px solid #dee2e6;
}

HTML

<div class="image-gallery">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 4">
  <img src="https://naytikurs.ru/img/5.png" alt="Image 5">
  <img src="https://naytikurs.ru/img/6.png" alt="Image 6">
</div>

Чтобы изображения стали flex-элементами, их родительский контейнер должен иметь `display: flex`. Для разрешения переноса добавьте к контейнеру свойство `flex-wrap` со значением `wrap`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сравнение wrap и nowrap

На странице два контейнера с одинаковым набором элементов. Сделайте так, чтобы в первом контейнере (`id="container-wrap"`) элементы переносились на новую строку, а во втором (`id="container-nowrap"`) оставались в одну строку, даже если выходят за границы.

CSS

.container {
  display: flex;
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 300px;
  margin: 15px auto;
}

#container-wrap {
  input1: input2;
}

#container-nowrap {
  input3: input4;
}

.item {
  width: 70px;
  height: 40px;
  margin: 5px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0; /* Запрещаем сжатие для наглядности nowrap */
}

#container-wrap .item { background-color: #0d6efd; }
#container-nowrap .item { background-color: #dc3545; }

                     .container {
  display: flex;
  border: 2px solid #6c757d;
  padding: 10px;
  max-width: 300px;
  margin: 15px auto;
}

#container-wrap {
  input1: input2;
}

#container-nowrap {
  input3: input4;
}

.item {
  width: 70px;
  height: 40px;
  margin: 5px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0; /* Запрещаем сжатие для наглядности nowrap */
}

#container-wrap .item { background-color: #0d6efd; }
#container-nowrap .item { background-color: #dc3545; }

HTML

<!-- Контейнер с переносом -->
<div class="container" id="container-wrap">
  <div class="item">Блок A</div>
  <div class="item">Блок B</div>
  <div class="item">Блок C</div>
  <div class="item">Блок D</div>
  <div class="item">Блок E</div>
</div>

<!-- Контейнер без переноса -->
<div class="container" id="container-nowrap">
  <div class="item">Блок A</div>
  <div class="item">Блок B</div>
  <div class="item">Блок C</div>
  <div class="item">Блок D</div>
  <div class="item">Блок E</div>
</div>

Для первого контейнера (`#container-wrap`) используйте `flex-wrap: wrap;`. Для второго контейнера (`#container-nowrap`) используйте `flex-wrap: nowrap;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку