Введение в Flexbox: Тренажер CSS

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

Этот набор упражнений познакомит вас с основами CSS Flexbox — мощного инструмента для создания гибких макетов. Вы научитесь превращать обычный контейнер во flex-контейнер, управлять направлением расположения элементов (по горизонтали или вертикали) и выравнивать их вдоль основной и поперечной осей. Каждое задание представляет собой практическую задачу, где вам нужно будет дополнить существующий CSS-код, чтобы достичь определенного визуального результата. Теория здесь отсутствует, упор сделан на практику и немедленную визуальную обратную связь.

Список тем

Превращение в Flex-контейнер

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

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  /* --- Задание --- */
  display: input1;
  /* --------------- */
}

.item {
  background-color: #0d6efd;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  /* --- Задание --- */
  display: input1;
  /* --------------- */
}

.item {
  background-color: #0d6efd;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Чтобы контейнер стал flex-контейнером, ему необходимо задать свойство `display` со значением `flex`. Это базовое свойство для начала работы с Flexbox.

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

Результат

Сообщения

Выполнить

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

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

Направление: Горизонталь (Строка)

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

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #198754;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #198754;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

HTML

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

Используйте свойство `flex-direction` для управления направлением основной оси. Значение `row` располагает элементы в строку.

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

Результат

Сообщения

Выполнить

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

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

Направление: Вертикаль (Колонка)

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

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  display: flex;
  /* --- Задание --- */
  flex-direction: input1;
  /* --------------- */
}

.item {
  background-color: #ffc107;
  color: black;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  display: flex;
  /* --- Задание --- */
  flex-direction: input1;
  /* --------------- */
}

.item {
  background-color: #ffc107;
  color: black;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

Используйте свойство `flex-direction`. Чтобы расположить элементы в столбец, задайте ему значение `column`.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание по основной оси: Начало

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

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #dc3545;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #dc3545;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Для выравнивания элементов вдоль основной оси используется свойство `justify-content`. Значение `flex-start` (или `start`) прижимает элементы к началу оси.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание по основной оси: Центр

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

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  justify-content: input1;
  /* --------------- */
}

.item {
  background-color: #0dcaf0;
  color: black;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  justify-content: input1;
  /* --------------- */
}

.item {
  background-color: #0dcaf0;
  color: black;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

HTML

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

Используйте свойство `justify-content`. Значение `center` центрирует группу элементов вдоль основной оси.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание по основной оси: Конец

Ваша задача — выровнять дочерние элементы по концу основной оси (справа, так как направление - строка) внутри flex-контейнера.

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  justify-content: input1;
  /* --------------- */
}

.item {
  background-color: #fd7e14;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  justify-content: input1;
  /* --------------- */
}

.item {
  background-color: #fd7e14;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Используйте свойство `justify-content`. Значение `flex-end` (или `end`) прижимает элементы к концу основной оси.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание по основной оси: Space Between

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

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  justify-content: input1;
  /* --------------- */
}

.item {
  background-color: #6f42c1;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  justify-content: input1;
  /* --------------- */
}

.item {
  background-color: #6f42c1;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Лев</div>
  <div class="item">Центр</div>
  <div class="item">Прав</div>
</div>

Используйте свойство `justify-content` со значением `space-between`. Это значение распределяет пространство между элементами.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание по основной оси: Space Around

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

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  justify-content: input1;
  /* --------------- */
}

.item {
  background-color: #d63384;
  color: white;
  padding: 15px;
  /* Убрали margin чтобы лучше видеть эффект space-around */
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  justify-content: input1;
  /* --------------- */
}

.item {
  background-color: #d63384;
  color: white;
  padding: 15px;
  /* Убрали margin чтобы лучше видеть эффект space-around */
  border-radius: 4px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Используйте свойство `justify-content` со значением `space-around`. Это значение создает равное пространство вокруг каждого элемента.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание по поперечной оси: Начало

В этом контейнере элементы расположены в строку. Ваша задача — выровнять их по началу поперечной оси (по верхнему краю контейнера).

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  height: 150px; /* Задана высота для наглядности */
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #20c997;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

.item:nth-child(2) {
  padding-top: 30px; /* Делаем один элемент выше для наглядности */
  padding-bottom: 5px;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  height: 150px; /* Задана высота для наглядности */
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  input1: input2;
  /* --------------- */
}

.item {
  background-color: #20c997;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

.item:nth-child(2) {
  padding-top: 30px; /* Делаем один элемент выше для наглядности */
  padding-bottom: 5px;
}

HTML

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

Для выравнивания элементов вдоль поперечной оси используется свойство `align-items`. Значение `flex-start` (или `start`) прижимает элементы к началу поперечной оси.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание по поперечной оси: Центр

Выровняйте элементы по центру поперечной оси контейнера (вертикально по центру, так как основная ось - горизонтальная).

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  height: 150px; /* Задана высота для наглядности */
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  align-items: input1;
  /* --------------- */
}

.item {
  background-color: #0d6efd;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

.item:nth-child(1) {
  padding-top: 30px;
  padding-bottom: 5px;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  height: 150px; /* Задана высота для наглядности */
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  align-items: input1;
  /* --------------- */
}

.item {
  background-color: #0d6efd;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

.item:nth-child(1) {
  padding-top: 30px;
  padding-bottom: 5px;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Используйте свойство `align-items`. Значение `center` центрирует элементы вдоль поперечной оси.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание по поперечной оси: Конец

Выровняйте элементы по концу поперечной оси контейнера (по нижнему краю, так как основная ось - горизонтальная).

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  height: 150px; /* Задана высота для наглядности */
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  align-items: input1;
  /* --------------- */
}

.item {
  background-color: #198754;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

.item:nth-child(3) {
  padding-top: 30px;
  padding-bottom: 5px;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  height: 150px; /* Задана высота для наглядности */
  display: flex;
  flex-direction: row;
  /* --- Задание --- */
  align-items: input1;
  /* --------------- */
}

.item {
  background-color: #198754;
  color: white;
  padding: 15px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

.item:nth-child(3) {
  padding-top: 30px;
  padding-bottom: 5px;
}

HTML

<div class="container">
  <div class="item">X</div>
  <div class="item">Y</div>
  <div class="item">Z</div>
</div>

Используйте свойство `align-items`. Значение `flex-end` (или `end`) прижимает элементы к концу поперечной оси.

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

Результат

Сообщения

Выполнить

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

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

Центрирование по обеим осям

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

CSS

.container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  height: 200px; /* Задана высота для наглядности */
  display: flex;
  /* --- Задание --- */
  input1: input2; /* Выравнивание по горизонтали */
  input3: input4; /* Выравнивание по вертикали */
  /* --------------- */
}

.item {
  background-color: #ffc107;
  color: black;
  padding: 20px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

                     .container {
  border: 2px solid #6c757d;
  padding: 10px;
  margin: 10px;
  height: 200px; /* Задана высота для наглядности */
  display: flex;
  /* --- Задание --- */
  input1: input2; /* Выравнивание по горизонтали */
  input3: input4; /* Выравнивание по вертикали */
  /* --------------- */
}

.item {
  background-color: #ffc107;
  color: black;
  padding: 20px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Центр</div>
</div>

Для центрирования по обеим осям нужно использовать два свойства: `justify-content` для выравнивания по основной оси (горизонталь в данном случае) и `align-items` для выравнивания по поперечной оси (вертикаль). Обоим свойствам нужно присвоить значение `center`.

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

Результат

Сообщения

Выполнить

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

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

Расположение картинок

Используйте Flexbox, чтобы расположить три изображения в ряд. Распределите их так, чтобы вокруг каждого изображения было одинаковое пространство.

CSS

.image-container {
  border: 2px solid #adb5bd;
  padding: 10px;
  margin: 10px;
  background-color: #f8f9fa;
  /* --- Задание --- */
  display: input1;
  justify-content: input2;
  /* --------------- */
  align-items: center; /* Добавим для красоты, если картинки разной высоты */
}

.image-container img {
  max-width: 80px; /* Ограничим ширину картинок */
  height: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

                     .image-container {
  border: 2px solid #adb5bd;
  padding: 10px;
  margin: 10px;
  background-color: #f8f9fa;
  /* --- Задание --- */
  display: input1;
  justify-content: input2;
  /* --------------- */
  align-items: center; /* Добавим для красоты, если картинки разной высоты */
}

.image-container img {
  max-width: 80px; /* Ограничим ширину картинок */
  height: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

HTML

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

Сделайте контейнер flex-контейнером (`display: flex`). Затем используйте `justify-content` со значением `space-around` для равномерного распределения пространства вокруг элементов.

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

Результат

Сообщения

Выполнить

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

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