Выравнивание с align-items: Тренажер CSS

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

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

Список тем

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

Используя 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-контейнера.

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

Результат

Сообщения

Выполнить

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

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

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

Теперь измените 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-контейнера.

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

Результат

Сообщения

Выполнить

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

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

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

Ваша задача — выровнять все дочерние элементы вертикально по центру серого контейнера. Используйте соответствующее значение для свойства `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`.

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

Результат

Сообщения

Выполнить

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

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

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

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

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-элементы растягиваться, чтобы заполнить контейнер по поперечной оси (если у них не задан размер по этой оси). Это значение используется по умолчанию.

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

Результат

Сообщения

Выполнить

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

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

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

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

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-элементы так, чтобы их базовые линии текста находились на одном уровне.

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

Результат

Сообщения

Выполнить

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

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

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

В этом примере элементы расположены в колонку (`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`, чтобы отцентрировать элементы по горизонтали.

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

Результат

Сообщения

Выполнить

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

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