• Теория
  • Теория

Свойство align-self во флексе

Мы поменяли местами картинку и заголовок, но на этом работа с карточками не окончена. Обратите внимание на заголовок. Зелёная линия под ним — это нижняя граница элемента. Она тянется на всю ширину карточки, потому что сам заголовок тянется на всю ширину. На макете же он отцентрован и занимает столько места, сколько нужно его содержимому:

Лайм

Лайм

Добавит кислинку и уникальный аромат.

+ Добавить
Макет карточек

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

Схема осей флекса

Если же главная ось направлена сверху вниз, то сжатие происходит по вертикали, а растяжение — по горизонтали.

Схема повёрнутых осей флекса

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

Используем для этого свойство align-self. Оно задаётся флекс-элементу и говорит, как ему расположиться на поперечной оси. Значения у этого свойства такие же, как у align-items: stretch (значение по умолчанию), flex-start, flex-end и center.

.element {
  align-self: flex-end;
}

Потренируемся использовать свойство align-self, а после отцентруем заголовок.

Если главная ось направлена сверху вниз, то для выравнивания всех элементов по вертикали используют justify-content.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Только 6 дней цена 18 900 ₽22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Продолжение» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.