Главная » Статьи » Flexbox justify-content: полное руководство по центрированию

Flexbox justify-content: полное руководство по центрированию

Flexbox justify-content: полное руководство по центрированию

От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать элементы внутри их контейнера как по горизонтали, так и по вертикали с помощью всего лишь нескольких строк кода CSS.

Макеты Flexbox на основе рядов и столбцов

Flexbox — это модуль одномерного макета, это означает, что ваши макеты основаны на строках или столбцах. Вы можете установить направление макета, используя свойство flex-direction, которое необходимо использовать во flex-контейнере. Оно может принимать четыре значения: row, row-reverse, column и column-reverse. Вот как на экране выглядят четыре разных направления flex:

Flex-макет на основе рядов (по умолчанию):

<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

.container { display: flex; flex-direction: row;
}

Flexbox justify-content: полное руководство по центрированию

Реверсивный макет на основе рядов:

.container { display: flex; flex-direction: row-reverse;
}

Flexbox justify-content: полное руководство по центрированию

Flex-макет на основе столбцов:

.container { display: flex; flex-direction: column;
}

Flexbox justify-content: полное руководство по центрированию

Реверсивный макет на основе столбцов:

.container { display: flex; flex-direction: column-reverse;
}

Flexbox justify-content: полное руководство по центрированию

На рисунке выше, вы можете увидеть макеты Flexbox с одной строкой, для которых мы не изменяли значение свойства flex-wrap по умолчанию — Nowrap . Поэтому, если вы хотите отображать элементы в нескольких строках или столбцах, добавьте для flex-контейнера также правило flex-wrap: wrap;.

Как работает центрирование Flexbox?

Фактически, flexbox не использует понятия «горизонтальное» и «вертикальное» центрирование. Вместо этого он работает с основной и поперечной осями, которые на экране выглядят как горизонтальное и вертикальное центрирование. Направление основной и поперечной осей зависит от значения вышеупомянутого свойства flex-direction.

В макетах flexbox на основе рядов (row и row-reverse) основная ось проходит в горизонтальном направлении, а поперечная — в вертикальном. С другой стороны, в макетах flexbox на основе столбцов (column и column-reverse) основная ось проходит вертикально, а поперечная ось — горизонтально. Если вы хотите узнать больше о том, как работают оси flexbox, ознакомьтесь с документацией по Flexbox на MDN.

Когда мы говорим о центрировании flexbox, мы имеем в виду два вида центрирования:

Центрирование вдоль основной оси (также называемой осью блока).

Центрирование вдоль поперечной оси (также называемой линейной осью).

Если вам нужен идеально отцентрированный flex-элемент, вы должны отцентрировать его вдоль обеих осей.

Центрирование вдоль основной оси

Вам необходимо использовать свойство justify-content для центрирования flex-элементов вдоль главной оси. Значением по умолчанию — flex-start, которое выравнивает все элементы внутри контейнера flex по началу главной оси. Если вы хотите центрировать элементы, вам нужно использовать его со значением center.

В случае макетов на основе строк следующий код CSS центрирует элементы по горизонтали (так как здесь, главная ось также проходит горизонтально):

.container { display: flex; flex-direction: row; justify-content: center;
}

Flexbox justify-content: полное руководство по центрированию

И, в случае макетов на основе столбцов, то же свойство justify-content выравнивает элементы по вертикали (так как здесь, главная ось проходит вертикально):

.container { display: flex; flex-direction: column; justify-content: center;
}

Flexbox justify-content: полное руководство по центрированию

Для row-reverse and column-reverse центрирование работает так же, как и для row и column. Это связано с тем, что центр главной оси находится на одинаковом расстоянии от начальной и конечной точек.

Однако обратите внимание, что если вы хотите использовать свойство justify-content с другим значением, таким как flex-end, результирующие макеты будут выглядеть по-разному при изменении направления.

Центрирование вдоль поперечной оси

Поскольку flexbox представляет собой одномерную разметку, поперечная ось играет второстепенную роль. Flex-элементы размещаются вдоль основной оси. Поперечная ось не меняет направление потока, а лишь регулирует элементы на экране. Существует три свойства CSS, которые вы можете использовать для центрирования вдоль поперечной оси:

align-items для однострочного центрирования всех flex-элементов,

align-self для однострочного центрирования отдельного flex-элемента,

align-content для многострочного центрирования всех flex-элементов (это свойство работает только тогда, когда flex-элементы переносятся в несколько строк).

Теперь давайте посмотрим, как они работают с различными значениями свойства flex-direction.

1. Однострочное центрирование вдоль поперечной оси

Вы можете использовать свойство align-items для выравнивания элементов вдоль поперечной оси. Если вы используете его вместе со свойством center, оно центрирует элементы по вертикали, когда flex-direction имеет значение row или row-reverse, и по горизонтали, когда flex-direction имеет значение column или column-reverse.

Вот как выглядит центрирование элементов вдоль поперечной оси в макетах на основе строк:

.container { display: flex; flex-direction: row; align-items: center;
}

Так как мы не указали justify-content, оно принимает значение по умолчанию — flex-start. Таким образом, flex-элементы выравниваются по началу основной (горизонтальной) оси и по центру поперечной (вертикальной) оси:

Flexbox justify-content: полное руководство по центрированию

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

.container { display: flex; flex-direction: column; align-items: center;
}

Здесь свойство justify-content также остается со значением по умолчанию (flex-start). Так как в макетах на основе столбцов, основная ось является вертикальной, flexbox выравнивает элементы по верху контейнера (начало основной оси), а центрирует их по горизонтали, следуя правилу align-items: center.

Flexbox justify-content: полное руководство по центрированию

2. Однострочное центрирование одного элемента вдоль поперечной оси

Вы можете не только центрировать все flex-элементы вдоль поперечной оси, но и выбрать центрирование только одного отдельного элемента с помощью CSS-свойства align-self, которое переопределяет align-items . Вам необходимо добавить align-self к отдельным flex-элементам (вместо контейнера flex) следующим образом:

<div class="container"> <div class="item"></div> <div class="item center"></div> <div class="item"></div>
</div>

.container { display: flex; flex-direction: row;
}
.center { align-self: center; background: magenta;
}

Как вы можете видеть на скриншоте ниже, мы центрирует второй элемент вдоль поперечной оси (по вертикали, так как это макет на основе строк). В то же время остальные элементы остаются на своем месте по умолчанию:

Flexbox justify-content: полное руководство по центрированию

В приведенном выше примере используется макет flexbox на основе строк, но align-items работает так же, как и в случае макетов на основе столбцов.

3. Многострочное центрирование вдоль поперечной оси

Модуль макета flexbox также позволяет центрировать несколько строк элементов вдоль поперечной оси. Свойство align-content позволяет распределять пространство вокруг элементов, когда они переносятся на несколько строк. Разницу между align-items и align-content немного трудно понять, поэтому давайте рассмотрим их в сравнении друг с другом.

Когда вы устанавливаете для flex-wrap значение wrap и center только для align-items, вы получите следующее:

.container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
}

Flexbox justify-content: полное руководство по центрированию

Хотя перенесенные элементы центрированы вдоль поперечной оси (по вертикали), пространство между ними распределено равномерно. Это то, что вы можете изменить с помощью align-content следующим образом:

.container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center;
}

Как вы можете видеть ниже, свойство align-content отвечает за распределение пространства вдоль поперечной оси. Поскольку для него установлено center, многострочные элементы «тянутся» к центру контейнера:

Flexbox justify-content: полное руководство по центрированию

Обратите внимание, что align-content работает только тогда, когда у нас есть более одной строки flex-элементов. Таким образом, вам не нужно беспокоиться об этом, когда у вас есть только один или несколько элементов.

Идеально центрированный Flex-элемент

Чтобы создать идеально центрированный макет с помощью flexbox, вам нужно отцентрировать его вдоль основной и поперечной осей. Наиболее частый случай использования — когда вы центрируете один элемент внутри другого. Во flexbox это всего лишь три правила CSS, которые работают с любыми HTML-элементами, а не только с div:

<div class="container"> <div class="item"></div>
</div>

.container { display: flex; justify-content: center; align-items: center;
}

Поскольку мы не установили значение для свойства flex-direction, оно принимает значение по умолчанию — row:

Flexbox justify-content: полное руководство по центрированию

Помимо одного элемента, вы также можете с помощью flexbox идеально отцентрировать несколько строк элементов. Вам нужно использовать следующий CSS в случае макетов на основе строк:

.container { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; align-content: center;
}

Flexbox justify-content: полное руководство по центрированию

И вот как выглядит идеально центрированный многострочный макет, когда для flex-direction установлено значение column:

.container { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; align-content: center;
}

Flexbox justify-content: полное руководство по центрированию

Заключение

Flexbox позволяет вам центрировать любые виды HTML-элементов внутри их контейнера. Применение к контейнеру правила display: flex удобно, если вы хотите расположить элементы по центру по горизонтали, вертикали или в обоих направлениях. Центрирование Flexbox — это отличное решение для создания идеально центрированных заголовков, изображений, видео, галерей продуктов и многого другого.

Источник: https://onextrapixel.com

Редакция: Команда webformyself.