Выравнивание с align-content

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

Опубликовано 17.03.2025
Просмотры 7
Автор
Рек. время прохождения 3 минуты
Упражнений 8
Комментарии 0
Тренажер CSS

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

Список тем

Выравнивание строк к началу

Задайте flex-контейнеру такое свойство, чтобы строки с элементами были прижаты к началу поперечной оси (в данном случае, к верху контейнера). Контейнер уже настроен как flex-контейнер с переносом строк.

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 250px; /* Задана высота для наглядности */
  width: 200px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Допишите свойство для выравнивания строк */
  input1: input2;
}

.flex-item {
  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: #88bfe8;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
HTML
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>
Используйте свойство `align-content` со значением `flex-start`, чтобы сгруппировать строки flex-элементов у начала поперечной оси контейнера.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выравнивание строк к концу

Измените CSS таким образом, чтобы строки с flex-элементами были прижаты к концу поперечной оси контейнера (в данном случае, к низу).

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 250px;
  width: 200px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Замените значение свойства для выравнивания строк */
  align-content: input1;
}

.flex-item {
  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: #88bfe8;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
HTML
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>
Для прижатия строк flex-элементов к концу поперечной оси контейнера используйте свойство `align-content` со значением `flex-end`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Центрирование строк

Ваша задача — расположить строки flex-элементов по центру поперечной оси контейнера. Допишите необходимое свойство и его значение.

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 280px;
  width: 220px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Допишите свойство и значение для центрирования строк */
  input1: input2;
}

.flex-item {
  width: 60px;
  height: 60px;
  margin: 5px;
  background-color: #5cb85c;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
HTML
<div class="flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
  <div class="flex-item">D</div>
  <div class="flex-item">E</div>
</div>
Чтобы центрировать строки flex-элементов по поперечной оси, примените к flex-контейнеру свойство `align-content` со значением `center`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Распределение строк с пространством между ними

Распределите строки flex-элементов так, чтобы первая строка была у начала контейнера, последняя — у конца, а пространство между ними было распределено равномерно.

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 180px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Укажите нужное значение для align-content */
  align-content: input1;
}

.flex-item {
  width: 45px;
  height: 45px;
  margin: 5px;
  background-color: #f0ad4e;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
HTML
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>
Используйте свойство `align-content` со значением `space-between`. Это значение размещает первую строку у начала поперечной оси, последнюю — у конца, а оставшееся пространство равномерно распределяет между строками.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Распределение строк с пространством вокруг

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

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 250px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Допишите свойство и значение */
  input1: input2;
}

.flex-item {
  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: #d9534f;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
HTML
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>
Примените свойство `align-content` со значением `space-around`. Оно создает равное пространство между строками и половинное пространство перед первой и после последней строки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Равномерное распределение строк

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

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 320px;
  width: 200px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Укажите нужное значение для align-content */
  align-content: input1;
}

.flex-item {
  width: 80px;
  height: 40px;
  margin: 5px;
  background-color: #5bc0de;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
HTML
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
</div>
Используйте свойство `align-content` со значением `space-evenly`. Это значение обеспечивает равное пространство между строками, а также до первой и после последней строки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Растягивание строк

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

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 220px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Укажите нужное значение для align-content */
  align-content: input1;
}

.flex-item {
  width: 60px;
  /* height: 60px; - Убрана для stretch */
  margin: 5px;
  padding: 10px 0; /* Добавлен padding для видимости */
  background-color: #777;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
HTML
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>
Используйте свойство `align-content` со значением `stretch`. Это значение растягивает строки flex-элементов, чтобы они заполнили все доступное пространство контейнера по поперечной оси. Убедитесь, что у flex-элементов не задана фиксированная высота по поперечной оси (в данном случае, `height`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Настройка Flexbox для align-content

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

CSS
.flex-container {
  height: 300px;
  width: 150px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Добавьте свойства для flex, переноса и выравнивания строк */
  input1: flex;
  input2: wrap;
  input3: center;
}

.flex-item {
  width: 60px;
  height: 60px;
  margin: 5px;
  background-color: #337ab7;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
HTML
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>
Чтобы решить задачу, вам нужно добавить три свойства для `.flex-container`: 1. `display: flex;` для создания flex-контейнера. 2. `flex-wrap: wrap;` чтобы разрешить перенос элементов на новые строки. 3. `align-content: center;` для центрирования этих строк по вертикали.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру