Выравнивание блоков в разметке 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-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`, чтобы применить эффект.

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

Ссылки
------

### CSS Атрибуты

* `justify-content`
* `align-content`
* `place-content` (en-US)
* `justify-items`
* `align-items`
* `place-items`
* `align-self`
* `row-gap`
* `column-gap`
* `gap`
### Глоссарий терминов

* Cross axis (en-US)
* Main axis
Руководства
-----------

* Выравнивание в разметке flexbox
Внешние ресурсы
---------------

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