Выравнивание отдельного элемента (justify-self, align-self)

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

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

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

Список тем

Выравнивание одного flex-элемента по вертикали

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

CSS
.container {
  display: flex;
  height: 150px;
  background-color: #eee;
  align-items: center; /* Выравнивание для всех по умолчанию */
}

.item {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border: 1px solid #2980b9;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 5px;
}

.item-2 {
  /* Измените выравнивание только для этого элемента */
  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>
Чтобы выровнять отдельный flex-элемент по поперечной оси, используйте свойство `align-self`. Для выравнивания по верхнему краю (началу оси) подойдет значение `flex-start` или `start`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выравнивание одного grid-элемента по вертикали

Дан grid-контейнер с тремя элементами. По умолчанию все элементы растягиваются по высоте ячейки (`align-items: stretch`). Вам нужно изменить выравнивание только первого элемента (.item-1) так, чтобы он прижался к нижнему краю своей grid-ячейки.

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 150px;
  background-color: #f0f0f0;
  /* align-items: stretch; это значение по умолчанию */
}

.grid-item {
  background-color: #5dade2;
  border: 1px solid #3498db;
  color: white;
  text-align: center;
  padding: 10px 0;
}

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

Выравнивание одного grid-элемента по горизонтали

Имеется grid-контейнер с тремя элементами. По умолчанию элементы растягиваются на всю ширину ячейки (`justify-items: stretch`). Ваша задача — изменить CSS так, чтобы только третий элемент (.item-3) выравнивался по центру своей ячейки по горизонтали.

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100px;
  background-color: #f0f0f0;
  /* justify-items: stretch; это значение по умолчанию */
}

.grid-item {
  background-color: #af7ac5;
  border: 1px solid #8e44ad;
  color: white;
  text-align: center;
  padding: 10px;
  line-height: 50px;
}

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

Позиционирование элемента в углу grid-ячейки

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

CSS
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  height: 200px;
  width: 200px;
  background-color: #f9f9f9;
  border: 1px dashed #ccc;
  /* align-items и justify-items по умолчанию stretch */
}

.grid-item img {
  display: block; /* Убираем лишний отступ у img */
  max-width: 100%;
  width: 80px; /* Задаем размер картинки */
  height: auto;
  /* Добавьте свойства для позиционирования в правом нижнем углу */
  input1: input2;
  input3: input4;
}
HTML
<div class="grid-container">
  <div class="grid-item">
    <img src="https://naytikurs.ru/img/7.png" alt="Icon">
  </div>
</div>
Чтобы позиционировать элемент в углу grid-ячейки, нужно одновременно управлять его горизонтальным и вертикальным выравниванием. Используйте `justify-self` для горизонтального выравнивания (значение `end` для правого края) и `align-self` для вертикального выравнивания (значение `end` для нижнего края).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Переопределение align-items для flex-элемента

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

CSS
.container {
  display: flex;
  height: 150px;
  background-color: #e8f8f5;
  align-items: flex-end; /* Все элементы по умолчанию внизу */
}

.item {
  width: 60px;
  min-height: 40px; /* Минимальная высота */
  background-color: #1abc9c;
  border: 1px solid #16a085;
  color: white;
  text-align: center;
  line-height: 40px;
  margin: 0 5px;
}

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

Переопределение justify-items для grid-элемента

В grid-контейнере элементы по умолчанию выровнены по центру своих ячеек по горизонтали (`justify-items: center`). Вам нужно переопределить это правило для элемента с классом `.wide-item`, чтобы он растянулся на всю ширину своей ячейки.

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
  height: 100px;
  background-color: #f4f6f7;
  justify-items: center; /* Все элементы по умолчанию по центру */
  align-items: center;
}

.grid-item {
  background-color: #5499c7;
  border: 1px solid #2980b9;
  color: white;
  text-align: center;
  padding: 10px 0;
  width: 60%; /* Изначально не на всю ширину */
}

.wide-item {
  background-color: #48c9b0; /* Другой цвет */
  border-color: #1abc9c;
  /* Заставьте этот элемент растянуться по ширине */
  input1: input2;
}
HTML
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item wide-item">2 (Wide)</div>
  <div class="grid-item">3</div>
</div>
Свойство `justify-self` на отдельном grid-элементе переопределяет `justify-items` контейнера. Чтобы элемент занял всю доступную ширину в своей ячейке, используйте значение `stretch` для `justify-self`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

В grid-контейнере для всех элементов задано выравнивание по центру (`align-self: center`) через общий класс `.grid-item`. Однако для самого контейнера установлено `align-items: start`. Ваша задача — для элемента с классом `.reset-align` отменить индивидуальное выравнивание, чтобы он следовал правилу контейнера (`align-items: start`).

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  height: 180px;
  background-color: #fdf2e9;
  align-items: start; /* Выравнивание для контейнера */
}

.grid-item {
  background-color: #e59866;
  border: 1px solid #d35400;
  color: white;
  text-align: center;
  padding: 15px 0;
  align-self: center; /* Индивидуальное выравнивание для всех */
}

.reset-align {
  background-color: #fad7a0; /* Другой цвет */
  border-color: #f39c12;
  /* Заставьте этот элемент использовать align-items контейнера */
  input1: input2;
}
HTML
<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item reset-align">Item 2 (Reset)</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>
Значение `auto` для `align-self` (или `justify-self`) указывает элементу использовать значение свойства `align-items` (или `justify-items`) родительского контейнера. Если у родителя не задано это свойство, `auto` будет вести себя как `stretch`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру