Выравнивание блоков CSS

Традиционно CSS обладал очень ограниченными возможностями выравнивания. Мы могли выравнивать текст с помощью text-align, центрировать блоки с помощью авто margin и в таблицах или блоках inline с помощью свойства vertical-align. Выравнивание текста теперь обрабатывается модулями Компоновка inline и CSS Текст, и впервые в модуле Выравнивание блоков мы имеем полные возможности горизонтального и вертикального выравнивания.

Если вы изначально изучали Flexbox, то можете рассматривать эти свойства как часть спецификации flexbox, и некоторые свойства действительно перечислены в Level 1 flexbox. Однако спецификация отмечает, что необходимо ссылаться на спецификацию Выравнивания блоков, так как она может добавить дополнительные возможности по сравнению с текущими возможностями flexbox.

Следующие примеры демонстрируют, как некоторые свойства выравнивания блоков применяются в сетке и Flexbox.

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

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

.box {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  align-items: start;
  justify-content: space-between;
}

.box :first-child {
  align-self: center;
}

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

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
</div>

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.box :first-child {
  align-self: center;
}

Спецификация подробно описывает терминологию выравнивания, чтобы облегчить обсуждение этих свойств выравнивания вне их реализации в конкретном методе компоновки. Также существуют некоторые ключевые понятия, общие для всех методов компоновки.

Выравнивание связано с режимами написания тем, что при выравнивании элемента мы не учитываем, выравниваем ли его по физическим измерениям сверху, справа, снизу и слева. Вместо этого мы описываем выравнивание с точки зрения начала и конца соответствующего измерения, с которым мы работаем. Это гарантирует, что выравнивание работает одинаково независимо от режима написания документа.

При использовании свойств выравнивания блоков вы будете выравнивать содержимое по одной из двух осей — основной (или inline) и поперечной (или cross). Основная ось — это ось, вдоль которой слова в предложении движутся в используемом режиме написания — например, для английского языка основная ось — горизонтальная. Ось блоков — это ось, вдоль которой выстраиваются блоки, такие как абзацы, и она проходит поперек основной оси.

При выравнивании элементов по основной оси вы будете использовать свойства, начинающиеся с justify-:

• justify-items
• justify-self
• justify-content

При выравнивании элементов по поперечной оси вы будете использовать свойства, начинающиеся с align-:

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

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

Объект выравнивания — это то, что выравнивается. Для justify-self или align-self, или когда эти значения задаются как группа с justify-items или align-items, это будет поле отступа элемента, на котором используется данное свойство. Свойства justify-content и align-content отличаются в зависимости от метода компоновки.

Контейнер выравнивания — это блок, внутри которого выравнивается объект. Обычно это содержащий блок объекта выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.

На рисунке ниже показан контейнер выравнивания с двумя объектами выравнивания внутри.

Если заданное выравнивание не может быть выполнено, то вступает в действие резервное выравнивание, которое обрабатывает доступное пространство. Это резервное выравнивание задаётся индивидуально для каждого метода компоновки и подробно описано на странице для данного метода.

Спецификация описывает три типа выравнивания, которые используют ключевые значения.

• Позиционное выравнивание: указание позиции объекта выравнивания относительно контейнера выравнивания.
• Выравнивание по базовой линии: эти ключевые слова определяют выравнивание как отношение между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
• Распределенное выравнивание: эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.

Для позиционного выравнивания определены следующие значения, которые могут использоваться как значения для выравнивания содержимого с justify-content и align-content , а также для выравнивания элементов с justify-self и align-self.

• center
• start
• end
• self-start
• self-end
• flex-start только для flexbox
• flex-end только для flexbox
• left
• right

За исключением физических значений left и right, которые относятся к физическим атрибутам экрана, все остальные значения — логические и относятся к режиму написания содержимого.

Например, при работе с сеткой CSS, если вы работаете с английским языком и устанавливаете justify-content в start, это переместит элементы по основной оси в начало, что будет слева, так как предложения на английском языке начинаются слева. Если бы вы использовали арабский язык, язык справа налево, то то же значение start привело бы к перемещению элементов вправо, поскольку предложения на арабском языке начинаются справа страницы.

В обоих этих примерах имеется justify-content: start, однако расположение начала изменяется в зависимости от режима написания.

Ключевые слова выравнивания по базовой линии используются для выравнивания базовых линий блоков в группе объектов выравнивания. Они могут использоваться как значения для выравнивания содержимого с justify-content и align-content , а также для выравнивания элементов с justify-self и align-self.

• baseline
• first baseline
• last baseline

Выравнивание содержимого по базовой линии — указание значения выравнивания по базовой линии для justify-content или align-content — работает в методах компоновки, которые выстраивают элементы в строки. Объекты выравнивания выравниваются по базовой линии друг к другу путем добавления отступов внутри блоков.

Выравнивание элементов по базовой линии сдвигается, чтобы выровнять их по базовой линии, добавляя отступ за пределами блоков. Самовыравнивание выполняется при использовании justify-self или align-self, или при установке этих значений в группе с justify-items и align-items.

Ключевые слова распределённого выравнивания используются с свойствами align-content и justify-content. Эти ключевые слова определяют, что произойдёт с любыми дополнительными пробелами после отображения элементов выравнивания. Значения следующие:

• stretch
• space-between
• space-around
• space-evenly

Например, в Flex-макете элементы выравниваются по flex-start по умолчанию. При работе в горизонтальном режиме сверху вниз, таком как английский, где flex-direction равно row, элементы начинаются с левого края, а любые доступные пробелы после отображения элементов размещаются после этих элементов.

Если вы установите justify-content: space-between на контейнере flex, доступное пространство теперь распределяется и размещается между элементами.

Для того, чтобы эти ключевые слова вступили в силу, необходимо, чтобы в измерении, по которому вы хотите выровнять элементы, было доступное пространство. При отсутствии пространства распределять нечего.

Ключевые слова safe и unsafe помогают определить поведение, когда элемент выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться по start в случае переполнения, вызванного заданным выравниванием, цель заключается в предотвращении «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена.

Если вы укажете unsafe, выравнивание будет соблюдаться, даже если это приведёт к такой потере данных.

Спецификация выравнивания блоков также включает свойства gap, row-gap, и column-gap. Эти свойства позволяют задавать одинаковый пробел между элементами в строке или столбце в любом методе макета, в котором элементы расположены таким образом.

Свойство gap является сокращением для row-gap и column-gap, что позволяет задать эти свойства сразу:

• row-gap
• column-gap
• gap

В примере ниже макет сетки использует сокращение gap для задания пробела 10px между дорожками строк и пробела 2em между дорожками столбцов.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 2em;
}

.box :first-child {
  align-self: center;
}

Помните, что другие факторы могут увеличить отображаемый визуальный пробел, например, использование ключевых слов распределения пробелов или добавление отступов к элементам.

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

• Выравнивание блоков в flexbox
• Выравнивание блоков в CSS сетке
• Выравнивание блоков в многоколоночном макете
• Выравнивание блоков для блочного, абсолютно позиционированного и табличного макета

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

• Ось пересечения
• Главная ось
• Контейнер выравнивания
• Элемент выравнивания
• Альтернативное выравнивание

• Основные понятия flexbox
• Выравнивание элементов в контейнере flex
• Выравнивание блоков в сетке CSS