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

Свойство justify-content, выравнивание по главной оси

Мы задали ширину и внутренние отступы колонкам. Их суммарный размер оказался меньше ширины родительского контейнера, и справа осталось свободное место.

На макете колонки прижаты к противоположным краям, а свободное пространство сосредоточено между ними:

Макет основного содержимого

Чтобы прижать колонки к краям родительского контейнера, используем свойство justify-content. Это свойство флекс-контейнера, которое говорит, как расположить флекс-элементы на главной оси.

У него может быть несколько значений:

  • flex-start — флекс-элементы располагаются в начале главной оси (по умолчанию — слева);
  • flex-end — флекс-элементы располагаются в конце главной оси (по умолчанию — справа);
  • center — флекс-элементы располагаются в центре главной оси;
  • space-around — свободное пространство распределяется вокруг флекс-элементов;
  • space-between — свободное пространство распределяется между флекс-элементами, при этом первый и последний элемент прижимаются к краям флекс-контейнера.

Добавим <main> свойство justify-content и поэкспериментируем со значениями.

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

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

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

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

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

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