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

Свойство justify-self

Мы увеличили ширину третьей колонки, и цена во второй карточке перестала выпадать. Но при этом блок с ценой (особенно в первой карточке) стал слишком большим. Так произошло, потому что по умолчанию грид-элементы занимают всё доступное пространство не только по высоте, но и по ширине.

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

Макет карточки

За выравнивание отдельного элемента по горизонтали отвечает свойство justify-self:

.element {
  justify-self: start;
}

Это свойство принимает следующие значения:

  • stretch — значение по умолчанию; элемент занимает всё пространство по ширине.
  • start — элемент сжимается до содержимого и прижимается к левой границе.
  • end — элемент сжимается до содержимого и прижимается к правой границе.
  • center — элемент сжимается до содержимого и располагается по центру.

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

Свойство justify-self не работает во флексбоксе, поэтому задать выравнивание по главной оси только для одного элемента не получится. В этом случае, как правило, элемент выравнивают с помощью внешних отступов.

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

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

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

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

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

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