Свойство align-self для отдельных элементов

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

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

Эта серия упражнений посвящена свойству `align-self`. Оно позволяет управлять выравниванием отдельного flex-элемента по поперечной оси (cross axis), переопределяя значение свойства `align-items`, заданное для flex-контейнера. Вы будете работать с готовым HTML-кодом и CSS-стилями, в которых нужно будет заполнить пропуски, чтобы добиться определенного визуального результата для отдельных элементов внутри flex-контейнера. Задания построены от простого к сложному, помогая закрепить понимание различных значений свойства `align-self` (`auto`, `flex-start`, `flex-end`, `center`, `baseline`, `stretch`).

Список тем

Выравнивание элемента по началу

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

CSS
.container {
  display: flex;
  align-items: center; /* Выравнивание по умолчанию для всех */
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border: 1px solid #333;
  margin: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.item-2 {
  background-color: #2196F3;
  /* Ваша задача - добавить свойство сюда */
  input1: input2;
}
HTML
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
</div>
Используйте свойство `align-self` для элемента с классом `.item-2`. Установите значение, которое выравнивает элемент по началу поперечной оси (`flex-start`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выравнивание элемента по концу

Используя тот же HTML, что и в предыдущем задании, теперь сделайте так, чтобы третий элемент (`.item-3`) был выровнен по концу поперечной оси контейнера. Остальные элементы должны по-прежнему подчиняться `align-items: center` контейнера.

CSS
.container {
  display: flex;
  align-items: center;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border: 1px solid #333;
  margin: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.item-3 {
  background-color: #ff9800;
  input1: input2;
}
HTML
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
</div>
Для элемента с классом `.item-3` примените свойство `align-self` со значением `flex-end`, чтобы прижать его к концу поперечной оси.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Центрирование отдельного элемента

В этом контейнере элементы по умолчанию выровнены по началу поперечной оси (`align-items: flex-start`). Ваша задача — переопределить это поведение только для первого элемента (`.item-1`), разместив его по центру поперечной оси.

CSS
.container {
  display: flex;
  align-items: flex-start; /* Выравнивание по умолчанию для всех */
  height: 250px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 60px;
  height: 60px;
  background-color: #8BC34A;
  border: 1px solid #333;
  margin: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}

input1 {
  background-color: #00BCD4;
  input2: center;
}
HTML
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
</div>
Найдите селектор для первого элемента (`.item-1`) и примените к нему свойство `align-self` со значением `center`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Контейнер выравнивает элементы по центру. Один из элементов (с ID `stretch-me`) не имеет фиксированной высоты. Сделайте так, чтобы этот элемент растянулся на всю высоту контейнера по поперечной оси, игнорируя `align-items: center`.

CSS
.container {
  display: flex;
  align-items: center; /* Выравнивание по умолчанию */
  height: 180px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 50px;
  height: 50px; /* У большинства есть высота */
  background-color: #FFC107;
  border: 1px solid #333;
  margin: 5px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

#stretch-me {
  background-color: #607D8B;
  height: auto; /* У этого элемента нет фиксированной высоты */
  input1: input2;
}
HTML
<div class="container">
  <div class="item">A</div>
  <div class="item" id="stretch-me">B</div>
  <div class="item">C</div>
</div>
Используйте свойство `align-self` со значением `stretch` для элемента с ID `stretch-me`. Обратите внимание, что у этого элемента нет свойства `height`, что позволяет ему растягиваться.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

CSS
.container {
  display: flex;
  align-items: center; /* Выравнивание по умолчанию */
  height: 150px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 70px;
  padding: 10px;
  background-color: #E91E63;
  border: 1px solid #333;
  margin: 5px;
  color: white;
}

.item-1 {
  font-size: 16px;
}

.item-2 {
  font-size: 32px; /* Больший шрифт */
  background-color: #9C27B0;
  input1: input2;
}

.item-3 {
  font-size: 12px;
}
HTML
<div class="container">
  <div class="item item-1">Base</div>
  <div class="item item-2">Line</div>
  <div class="item item-3">Align</div>
</div>
Примените к элементу `.item-2` свойство `align-self` со значением `baseline`. Это выровняет элемент так, чтобы его текстовая базовая линия совпала с другими.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование значения auto

В этом примере для второго элемента (`.item-2`) установлено `align-self: flex-start`, что переопределяет `align-items: center` контейнера. Ваша задача — изменить CSS таким образом, чтобы второй элемент снова подчинялся выравниванию контейнера, используя значение `auto` для `align-self`.

CSS
.container {
  display: flex;
  align-items: center; /* Выравнивание по умолчанию для всех */
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border: 1px solid #333;
  margin: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.item-2 {
  background-color: #2196F3;
  align-self: input1; /* Измените это значение */
}
HTML
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
</div>
Найдите правило для `.item-2` и измените значение свойства `align-self` на `auto`. Это заставит элемент унаследовать значение `align-items` от родительского flex-контейнера.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Разное выравнивание для нескольких элементов

Задайте разное выравнивание для элементов: первый элемент (`.item-1`) должен быть выровнен по началу поперечной оси, а третий элемент (`.item-3`) — по концу. Второй элемент должен остаться выровненным по центру (как задано в контейнере).

CSS
.container {
  display: flex;
  align-items: center; /* Центрирование по умолчанию */
  height: 220px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 55px;
  height: 55px;
  border: 1px solid #333;
  margin: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.item-1 {
  background-color: #f44336;
  input1: input2;
}

.item-2 {
  background-color: #2196F3;
  /* Для этого элемента ничего менять не нужно */
}

.item-3 {
  background-color: #ffeb3b;
  color: black;
  input3: input4;
}
HTML
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
</div>
Добавьте два CSS-правила: одно для `.item-1` с `align-self: flex-start`, другое для `.item-3` с `align-self: flex-end`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выравнивание элемента с изображением

В контейнере находятся текстовый блок и изображение. Контейнер выравнивает элементы по центру. Сделайте так, чтобы изображение (`.img-item`) выровнялось по нижнему краю контейнера (по концу поперечной оси).

CSS
.container {
  display: flex;
  align-items: center; /* Выравнивание по умолчанию */
  height: 250px;
  border: 1px solid #ccc;
  padding: 10px;
  gap: 15px; /* Пространство между элементами */
}

.text-item {
  background-color: #eee;
  padding: 15px;
  border: 1px solid #ddd;
}

.img-item {
  /* Изображение по умолчанию выровнено по центру */
  input1: input2;
}

.img-item img {
  display: block; /* Убирает лишние отступы под изображением */
  max-width: 100px; /* Ограничение размера для iframe */
  height: auto;
  border: 1px solid #999;
}
HTML
<div class="container">
  <div class="text-item">Текст рядом с картинкой</div>
  <div class="img-item">
    <img src="https://naytikurs.ru/img/7.png" alt="Example image">
  </div>
</div>
Используйте селектор `.img-item` и примените к нему свойство `align-self` со значением `flex-end`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру