Свойство flex-flow (сокращение для direction и wrap): Тренажер CSS

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

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

Список тем

Базовое расположение: строка без переноса

Используйте свойство `flex-flow`, чтобы расположить элементы в ряд (горизонтально) слева направо. Элементы не должны переноситься на новую строку, даже если они не помещаются в контейнер. Это поведение по умолчанию для flex-контейнеров.

CSS

.container {
  display: flex;
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  /* Задайте направление и перенос */
  input1: input2 input3;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  min-width: 80px; /* Чтобы элементы не сжимались слишком сильно */
}

                     .container {
  display: flex;
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  /* Задайте направление и перенос */
  input1: input2 input3;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  min-width: 80px; /* Чтобы элементы не сжимались слишком сильно */
}

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>

Для расположения элементов в ряд используется значение `row`. Чтобы запретить перенос, используется значение `nowrap`. Свойство `flex-flow` позволяет задать оба значения одновременно. Вспомните, какие значения `flex-flow` принимает по умолчанию.

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

Результат

Сообщения

Выполнить

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

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

Расположение в столбец

Измените CSS таким образом, чтобы элементы внутри контейнера располагались вертикально, один под другим, сверху вниз. Перенос элементов должен быть отключен.

CSS

.container {
  display: flex;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #aaa;
  height: 250px; /* Задаем высоту для наглядности колонки */
  /* Установите вертикальное направление без переноса */
  flex-flow: input1 input2;
}

.item {
  background-color: #e74c3c;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

                     .container {
  display: flex;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #aaa;
  height: 250px; /* Задаем высоту для наглядности колонки */
  /* Установите вертикальное направление без переноса */
  flex-flow: input1 input2;
}

.item {
  background-color: #e74c3c;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

Чтобы расположить элементы в столбец, используется значение `column` для `flex-direction`. Перенос отключается значением `nowrap` для `flex-wrap`. Используйте сокращенное свойство `flex-flow` для установки обоих значений.

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

Результат

Сообщения

Выполнить

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

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

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

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

CSS

.container {
  display: flex;
  background-color: #eafaf1;
  padding: 10px;
  border: 1px solid #58d68d;
  /* Задайте горизонтальное направление и включите перенос */
  input1: row input2;
}

.item {
  background-color: #2ecc71;
  color: white;
  padding: 18px;
  margin: 6px;
  text-align: center;
  flex-basis: 100px; /* Базовая ширина, чтобы перенос был заметен */
}

                     .container {
  display: flex;
  background-color: #eafaf1;
  padding: 10px;
  border: 1px solid #58d68d;
  /* Задайте горизонтальное направление и включите перенос */
  input1: row input2;
}

.item {
  background-color: #2ecc71;
  color: white;
  padding: 18px;
  margin: 6px;
  text-align: center;
  flex-basis: 100px; /* Базовая ширина, чтобы перенос был заметен */
}

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>

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

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

Результат

Сообщения

Выполнить

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

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

Обратный порядок в строке с переносом

Расположите элементы в строку, но в обратном порядке (справа налево). Также разрешите элементам переноситься на новую строку, если они не помещаются в контейнер.

CSS

.container {
  display: flex;
  background-color: #fef9e7;
  padding: 10px;
  border: 1px solid #f7dc6f;
  /* Задайте обратное горизонтальное направление и включите перенос */
  flex-flow: input1 input2;
}

.item {
  background-color: #f1c40f;
  color: #333;
  padding: 20px;
  margin: 5px;
  text-align: center;
  flex-basis: 90px;
}

                     .container {
  display: flex;
  background-color: #fef9e7;
  padding: 10px;
  border: 1px solid #f7dc6f;
  /* Задайте обратное горизонтальное направление и включите перенос */
  flex-flow: input1 input2;
}

.item {
  background-color: #f1c40f;
  color: #333;
  padding: 20px;
  margin: 5px;
  text-align: center;
  flex-basis: 90px;
}

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 class="item">7</div>
</div>

Для расположения элементов в строку в обратном порядке используется значение `row-reverse` для `flex-direction`. Перенос включается значением `wrap` для `flex-wrap`. Используйте `flex-flow` для задания обоих значений.

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

Результат

Сообщения

Выполнить

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

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

Столбец с обратным порядком и переносом

Необходимо расположить элементы в столбец, но в обратном порядке (снизу вверх). При этом, если элементы не помещаются по высоте, они должны переноситься в следующий столбец.

CSS

.container {
  display: flex;
  background-color: #e8daef;
  padding: 10px;
  border: 1px solid #c39bd3;
  height: 200px; /* Ограничиваем высоту для демонстрации переноса */
  width: 250px; /* Ограничиваем ширину для создания столбцов */
  /* Задайте обратное вертикальное направление и включите перенос */
  input1: input2 input3;
}

.item {
  background-color: #8e44ad;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
  width: 50px; /* Ширина элементов */
}

                     .container {
  display: flex;
  background-color: #e8daef;
  padding: 10px;
  border: 1px solid #c39bd3;
  height: 200px; /* Ограничиваем высоту для демонстрации переноса */
  width: 250px; /* Ограничиваем ширину для создания столбцов */
  /* Задайте обратное вертикальное направление и включите перенос */
  input1: input2 input3;
}

.item {
  background-color: #8e44ad;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
  width: 50px; /* Ширина элементов */
}

HTML

<div class="container">
  <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 class="item">F</div>
</div>

Для расположения элементов в столбец снизу вверх используется значение `column-reverse` для `flex-direction`. Чтобы разрешить перенос в новые столбцы (при наличии высоты у контейнера), используется значение `wrap` для `flex-wrap`. Задайте оба значения через `flex-flow`.

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

Результат

Сообщения

Выполнить

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

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

Только направление: столбец

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

CSS

.container {
  display: flex;
  background-color: #d6eaf8;
  padding: 10px;
  border: 1px solid #85c1e9;
  height: 280px;
  /* Задайте только вертикальное направление */
  flex-flow: input1;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

                     .container {
  display: flex;
  background-color: #d6eaf8;
  padding: 10px;
  border: 1px solid #85c1e9;
  height: 280px;
  /* Задайте только вертикальное направление */
  flex-flow: input1;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

Свойство `flex-flow` может принимать одно значение. Если указано только значение для `flex-direction` (например, `column`), то `flex-wrap` примет значение по умолчанию (`nowrap`).

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

Результат

Сообщения

Выполнить

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

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

Только перенос: включить

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

CSS

.container {
  display: flex;
  background-color: #fdedec;
  padding: 10px;
  border: 1px solid #f5b7b1;
  /* Включите только перенос строк */
  flex-flow: input1;
}

.item {
  background-color: #e74c3c;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
  flex-basis: 110px;
}

                     .container {
  display: flex;
  background-color: #fdedec;
  padding: 10px;
  border: 1px solid #f5b7b1;
  /* Включите только перенос строк */
  flex-flow: input1;
}

.item {
  background-color: #e74c3c;
  color: white;
  padding: 15px;
  margin: 5px;
  text-align: center;
  flex-basis: 110px;
}

HTML

<div class="container">
  <div class="item">Box 1</div>
  <div class="item">Box 2</div>
  <div class="item">Box 3</div>
  <div class="item">Box 4</div>
  <div class="item">Box 5</div>
  <div class="item">Box 6</div>
</div>

Свойство `flex-flow` может принимать одно значение. Если указано только значение для `flex-wrap` (например, `wrap`), то `flex-direction` примет значение по умолчанию (`row`).

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

Результат

Сообщения

Выполнить

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

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