Выравнивание с align-items [Модуль 6: Flexbox]: Тренажер CSS

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

Эта серия упражнений посвящена свойству `align-items` в CSS Flexbox. Вы попрактикуетесь в выравнивании flex-элементов вдоль поперечной оси контейнера. Вам будет предоставлен готовый HTML-код и CSS-стили с некоторыми пропусками. Ваша задача — заполнить эти пропуски правильными значениями или свойствами, чтобы добиться нужного визуального результата, который будет отображаться в iframe. Задания идут от простого к сложному, помогая закрепить понимание различных значений свойства `align-items`.

Список тем

Выравнивание по верхнему краю

id: 37382_align-items-flex-start-1

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

CSS

.container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Расположите элементы у верхнего края */
  input1: input2;
}

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

                     .container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Расположите элементы у верхнего края */
  input1: input2;
}

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

HTML

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

Чтобы выровнять элементы по началу поперечной оси (в данном случае, по верхнему краю), используйте свойство `align-items` со значением `flex-start` для flex-контейнера.

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

Результат

Сообщения

Выполнить

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

Выравнивание по нижнему краю

id: 37382_align-items-flex-end-2

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

CSS

.container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Расположите элементы у нижнего края */
  align-items: input1;
}

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

                     .container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Расположите элементы у нижнего края */
  align-items: input1;
}

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

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37382_align-items-center-3

Ваша задача — выровнять все дочерние элементы вертикально по центру серого контейнера. Используйте соответствующее значение для свойства `align-items`.

CSS

.container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Выровняйте элементы по центру поперечной оси */
  input1: center;
}

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

                     .container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Выровняйте элементы по центру поперечной оси */
  input1: center;
}

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

HTML

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

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

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

Результат

Сообщения

Выполнить

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

Растягивание элементов

id: 37382_align-items-stretch-4

Сделайте так, чтобы все дочерние элементы растянулись на всю высоту серого контейнера. Обратите внимание, что у элементов не задана фиксированная высота.

CSS

.container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Растяните элементы на всю высоту */
  align-items: input1;
}

.item {
  width: 50px;
  /* Высота не задана */
  margin: 5px;
  padding: 10px;
  background-color: #f39c12;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

                     .container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Растяните элементы на всю высоту */
  align-items: input1;
}

.item {
  width: 50px;
  /* Высота не задана */
  margin: 5px;
  padding: 10px;
  background-color: #f39c12;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

Выравнивание по базовой линии текста

id: 37382_align-items-baseline-5

Выровняйте элементы таким образом, чтобы их базовые линии текста совпали. Обратите внимание, что у элементов разный размер шрифта.

CSS

.container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Выровняйте элементы по базовой линии текста */
  input1: input2;
}

.item {
  width: 60px;
  margin: 5px;
  padding: 10px;
  background-color: #9b59b6;
  color: white;
}

.item1 { font-size: 16px; }
.item2 { font-size: 24px; }
.item3 { font-size: 12px; }

                     .container {
  display: flex;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
  /* Выровняйте элементы по базовой линии текста */
  input1: input2;
}

.item {
  width: 60px;
  margin: 5px;
  padding: 10px;
  background-color: #9b59b6;
  color: white;
}

.item1 { font-size: 16px; }
.item2 { font-size: 24px; }
.item3 { font-size: 12px; }

HTML

<div class="container">
  <div class="item item1">Text</div>
  <div class="item item2">Text</div>
  <div class="item item3">Text</div>
</div>

Используйте значение `baseline` для свойства `align-items`. Это значение выравнивает flex-элементы так, чтобы их базовые линии текста находились на одном уровне.

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

Результат

Сообщения

Выполнить

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

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

id: 37382_align-items-column-6

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

CSS

.container {
  display: flex;
  /* Элементы располагаются в колонку */
  flex-direction: column;
  height: 300px;
  width: 200px; /* Ширина задана для наглядности */
  background-color: #eee;
  border: 1px solid #ccc;
  /* Выровняйте элементы по центру горизонтально */
  input1: input2;
}

.item {
  width: 80px; /* Ширина меньше контейнера */
  height: 40px;
  margin: 5px 0; /* Вертикальные отступы */
  background-color: #1abc9c;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

                     .container {
  display: flex;
  /* Элементы располагаются в колонку */
  flex-direction: column;
  height: 300px;
  width: 200px; /* Ширина задана для наглядности */
  background-color: #eee;
  border: 1px solid #ccc;
  /* Выровняйте элементы по центру горизонтально */
  input1: input2;
}

.item {
  width: 80px; /* Ширина меньше контейнера */
  height: 40px;
  margin: 5px 0; /* Вертикальные отступы */
  background-color: #1abc9c;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

HTML

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

Когда `flex-direction` установлено в `column`, поперечная ось становится горизонтальной. Свойство `align-items` теперь управляет горизонтальным выравниванием. Используйте значение `center`, чтобы отцентрировать элементы по горизонтали.

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

Результат

Сообщения

Выполнить

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