Выравнивание блоков в разметке Flexbox

Основной пример

В этом примере три элемента flex выровнены по главной оси с помощью атрибута justify-content и по поперечной оси с помощью атрибута align-items. Первый элемент переопределяет значения align-items, устанавливая значение атрибута align-self в center.

Оси и атрибут flex-direction

Разметка flexbox следует согласно режиму чтения документа (writing mode), поэтому, если вы используете английский язык и устанавливаете атрибут justify-content в значение flex-end, то элементы будут выровнены по концу flex контейнера. Если вы работаете со значением атрибута flex-direction, установленным в row, то выравнивание будет происходить в линейном направлении.

Однако, работая с разметкой flexbox, вы можете изменить поведение главной оси, установив значение атрибута flex-direction в column. В этом случае, атрибут justify-content будет выравнивать элементы в направлении блока. Поэтому проще всего думать о главной и поперечной осях при работе с разметкой Flexbox следующим образом:

• Главная ось = направление согласно атрибуту flex-direction = выравнивание через атрибут justify-content
• Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут align-content, align-self/align-items

Выравнивание по Главной Оси

• justify-content

Выравнивание по Поперечной Оси

• align-self
• align-items
• align-content

Отсутствие атрибута justify-self в разметке Flexbox

При использовании разметки flexbox, главная ось работает с нашим контентом как с группой. Количество места, необходимого для размещения элементов, рассчитывается, а оставшееся пространство становится доступным для заполнения. Атрибут justify-content контролирует использование оставшегося пространства. Если установить атрибут justify-content в значение flex-end, то дополнительное пространство заполнится перед элементами, если установить атрибут justify-content в значение space-around, то пространство заполнится с обеих сторон элемента в этом измерении и т. д.

Это означает, что атрибут justify-self нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.

Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.

Выравнивание и свойство margin: auto

В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут justify-self. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут margin со значением auto. Атрибут с таким значением будет занимать все доступное пространство в своём измерении. Так работает центрирование блока со свойством margin:auto. Установив значение атрибутов margin-left и margin-right в значение auto, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.

Установив значение атрибутаmargin в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.

Атрибуты разрыва

• row-gap
• column-gap
• gap

Создание разрыва фиксированного размера между элементами

На главной оси атрибут column-gap будет создавать разрывы фиксированного размера между соседними элементами.

На поперечной оси атрибут row-gap создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут flex-wrap в значение wrap, чтобы применить эффект.

Ссылки

CSS Атрибуты

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• align-self
• row-gap
• column-gap
• gap

Глоссарий терминов

• Cross axis
• Main axis

Руководства

• Выравнивание в разметке flexbox

Внешние ресурсы

• Шпаргалка по выравниваю блоков
• CSS разметки Grid, Flexbox и выравнивание блоков
• Размышления о частичной реализации выравнивания блоков