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

Спецификация Выравнивание Блоков подробно описывает, как выравнивание работает при использовании различных способов разметки. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox. Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке 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-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 элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.

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

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

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

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

Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.

Ссылки

CSS Атрибуты

Словарь терминов

Руководства

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