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

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

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

В этой серии упражнений вы попрактикуетесь в использовании свойства `justify-content` для выравнивания flex-элементов вдоль главной оси контейнера. Вам предстоит заполнить пропуски в CSS коде, чтобы добиться различного расположения элементов: у начала, у конца, по центру, с равными отступами и так далее. Эти задания помогут вам визуально понять и закрепить работу каждого значения свойства `justify-content`.

Список тем

Выравнивание по началу (По умолчанию)

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

CSS
.container {
  display: flex;
  padding: 10px;
  border: 1px dashed #666;
  background-color: #f0f0f0;
  height: 100px;
  /* Допишите свойство и значение для выравнивания по началу */
  input1: input2;
}

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

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

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

CSS
.container {
  display: flex;
  padding: 10px;
  border: 1px dashed #666;
  background-color: #f0f0f0;
  height: 100px;
  /* Используйте свойство justify-content для выравнивания по концу */
  justify-content: input1;
}

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

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

Расположите flex-элементы по центру контейнера вдоль главной оси. Они должны сгруппироваться в середине.

CSS
.container {
  display: flex;
  padding: 10px;
  border: 1px dashed #666;
  background-color: #f0f0f0;
  height: 100px;
  /* Задайте центрирование элементов */
  input1: center;
}

.item {
  width: 40px;
  height: 40px;
  background-color: #2ecc71;
  color: white;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">X</div>
  <div class="item">Y</div>
  <div class="item">Z</div>
</div>
Чтобы сгруппировать элементы по центру главной оси, примените к flex-контейнеру свойство `justify-content` со значением `center`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

CSS
.container {
  display: flex;
  padding: 10px;
  border: 1px dashed #666;
  background-color: #f0f0f0;
  height: 100px;
  /* Распределите пространство между элементами */
  justify-content: input1;
}

.item {
  width: 40px;
  height: 40px;
  background-color: #f39c12;
  color: white;
  /* Уберем margin, чтобы space-between работал чище */
  /* margin: 5px; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
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>
Используйте значение `space-between` для свойства `justify-content`. Оно размещает первый элемент у начала, последний у конца, а оставшееся пространство равномерно распределяет между элементами.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

CSS
.container {
  display: flex;
  padding: 10px;
  border: 1px dashed #666;
  background-color: #f0f0f0;
  height: 100px;
  /* Распределите пространство вокруг элементов */
  input1: input2;
}

.item {
  width: 40px;
  height: 40px;
  background-color: #9b59b6;
  color: white;
  /* Уберем margin */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">:)</div>
  <div class="item">:|</div>
  <div class="item">:(</div>
</div>
Примените значение `space-around` к свойству `justify-content`. Это значение создает равные отступы с обеих сторон каждого flex-элемента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

CSS
.container {
  display: flex;
  padding: 10px;
  border: 1px dashed #666;
  background-color: #f0f0f0;
  height: 100px;
  /* Распределите элементы с абсолютно равными отступами */
  justify-content: input1;
}

.item {
  width: 40px;
  height: 40px;
  background-color: #1abc9c;
  color: white;
  /* Уберем margin */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">#</div>
  <div class="item">@</div>
  <div class="item">$</div>
</div>
Используйте значение `space-evenly` для свойства `justify-content`. Оно обеспечивает равное пространство между элементами и между крайними элементами и границами контейнера.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выравнивание картинок

Используя flexbox, расположите три картинки по центру контейнера вдоль главной оси.

CSS
.image-container {
  display: flex;
  padding: 15px;
  border: 2px solid #3498db;
  background-color: #ecf0f1;
  height: 150px;
  /* Допишите свойство и значение для центрирования */
  input1: input2;
  /* Добавим align-items для вертикального центрирования для красоты */
  align-items: center;
}

.image-item {
  width: 60px; /* Немного увеличим размер для картинок */
  height: 60px;
  margin: 0 5px; /* Добавим горизонтальный отступ */
  object-fit: cover;
  border: 1px solid #bdc3c7;
  border-radius: 50%; /* Сделаем круглыми */
}
HTML
<div class="image-container">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1" class="image-item">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2" class="image-item">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 4" class="image-item">
</div>
Чтобы разместить элементы (в данном случае, картинки) по центру flex-контейнера, используйте свойство `justify-content` со значением `center`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Картинки по краям

Расположите две картинки так, чтобы одна была у левого края контейнера, а другая - у правого. Пространство между ними должно быть максимальным.

CSS
.image-container {
  display: flex;
  padding: 15px;
  border: 2px solid #e74c3c;
  background-color: #ecf0f1;
  height: 150px;
  /* Используйте justify-content для размещения по краям */
  justify-content: input1;
  align-items: center;
}

.image-item {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 1px solid #bdc3c7;
  /* Уберем margin, чтобы space-between работал чисто */
}
HTML
<div class="image-container">
  <img src="https://naytikurs.ru/img/5.png" alt="Image 5" class="image-item">
  <img src="https://naytikurs.ru/img/6.png" alt="Image 6" class="image-item">
</div>
Для такого расположения используйте значение `space-between` свойства `justify-content`. Оно разносит крайние элементы к границам контейнера.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру