Выравнивание элементов в контейнере flex

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

Измените размер контейнера или вложенного элемента в приведенном ниже примере кода. Вложенный элемент всегда остается центрированным.

<div class="box">
  <div></div>
</div>

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dotted rgb(96 139 168);
}

.box div {
  width: 100px;
  height: 100px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

Свойства, которые мы рассмотрим в этом руководстве, следующие.

• justify-content: Управляет выравниванием всех элементов по основной оси.
• align-items: Управляет выравниванием всех элементов по поперечной оси.
• align-self: Управляет выравниванием отдельного элемента flex по поперечной оси.
• align-content: Управляет интервалом между строками flex по поперечной оси.
• gap, column-gap и row-gap: Используются для создания интервалов или отступов между элементами flex.

Мы также узнаем, как можно использовать автоотступы для выравнивания в flexbox.

Свойство align-items, установленное в контейнере flex, и свойство align-self, установленное в элементах flex, управляют выравниванием элементов flex по поперечной оси. Поперечная ось проходит вниз по столбцам, если flex-direction имеет значение row, и вдоль строк, если flex-direction имеет значение column.

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

Причина, по которой элементы имеют одинаковую высоту, заключается в том, что начальное значение align-items, свойства, контролирующего выравнивание по поперечной оси, установлено в stretch.

Мы можем использовать другие значения для управления тем, как элементы выравниваются:

• align-items: stretch
• align-items: flex-start
• align-items: flex-end
• align-items: start
• align-items: end
• align-items: center
• align-items: baseline
• align-items: first baseline
• align-items: last baseline

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

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

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  align-items: stretch;
}

.box div {
  width: 100px;
  height: 100px;
  background-color: rgb(96 139 168 / 0.2);
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
}

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

В этом следующем примере live контейнер flex имеет значение align-items: flex-start, что означает, что все элементы выровнены в начале поперечной оси. Используя селектор first-child, первый элемент установлен на значение align-self: stretch. Другой элемент с классом selected имеет установленное значение align-self: center . Измените значение align-items или значения align-self для отдельных элементов, чтобы увидеть, как это работает.

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

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  align-items: flex-start;
  height: 200px;
}
.box div {
  background-color: rgb(96 139 168 / 0.2);
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  padding: 20px;
}
.box > *:first-child {
  align-self: stretch;
}
.box .selected {
  align-self: center;
}

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

Сохраняя тот же режим написания, когда flex-direction изменяется на column, свойства align-items и align-self будут выравнивать элементы слева и справа вместо сверху и снизу; эти свойства по-прежнему выравнивают элементы по поперечной оси, но поперечная ось теперь является горизонтальной!

Вы можете попробовать это в приведенном ниже примере, у которого есть контейнер flex с flex-direction: column, но в остальном он точно такой же, как предыдущий пример.

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

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 200px;
}
.box div {
  background-color: rgb(96 139 168 / 0.2);
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  padding: 20px;
}
.box > *:first-child {
  align-self: stretch;
}
.box .selected {
  align-self: center;
}

До сих пор мы сосредоточились на выравнивании элементов или отдельных элементов внутри области, определенной контейнером flex, содержащим одну строку элементов flex. Когда элементы flex разрешено обтекать по нескольким строкам, свойство align-content может использоваться для управления распределением пространства между строками, также известным как упаковка строк flex.

Для того, чтобы align-content имело эффект, размер поперечной оси (высота в данном случае) контейнера flex должна быть больше, чем необходимо для отображения элементов. Затем оно действует на все элементы как набор. Значения align-content определяют, что происходит со свободным пространством и выравниванием всего набора элементов внутри него.

Свойство align-content принимает следующие значения:

• align-content: flex-start
• align-content: flex-end
• align-content: start
• align-content: end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: space-evenly
• align-content: stretch
• align-content: normal (ведет себя как stretch)
• align-content: baseline
• align-content: first baseline
• align-content: last baseline

В примере live ниже контейнер flex имеет высоту 400 pixels, что больше, чем необходимо для отображения наших элементов. Значение align-content равно space-between, что означает, что доступное пространство распределяется между строками flex, которые размещаются вплотную к началу и концу контейнера по поперечной оси.

Попробуйте другие значения, чтобы увидеть, как работает свойство align-content.

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

.box {
  width: 450px;
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: space-between;
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  flex: 1 1 100px;
}

.box div {
  background-color: rgb(96 139 168 / 0.2);
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  padding: 20px;
}

Еще раз мы можем изменить flex-direction на column , чтобы увидеть, как это свойство ведет себя, когда мы работаем по столбцам. Как и прежде, нам нужно достаточно места в поперечной оси, чтобы после отображения всех элементов оставалось немного свободного места.

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

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 400px;
  height: 300px;
  align-content: space-between;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  flex: 1 1 100px;
}

.box div {
  background-color: rgb(96 139 168 / 0.2);
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  padding: 20px;
}

Теперь, когда мы увидели, как работает выравнивание по поперечной оси, мы можем взглянуть на основную ось. Здесь у нас доступно только одно свойство — justify-content. Это связано с тем, что мы работаем только с элементами как с группой на основной оси. С помощью justify-content мы контролируем, что происходит с имеющимся пространством, если его больше, чем необходимо для отображения элементов.

В нашем начальном примере с display: flex на контейнере элементы отображаются как строка, и все они выстраиваются в начале контейнера. Это происходит из-за начального значения justify-content — normal, которое ведет себя как start. Любое свободное пространство размещается в конце элементов.

Значения baseline в этом измерении неактуальны. В противном случае, свойство justify-content принимает те же значения, что и align-content.

• justify-content: flex-start
• justify-content: flex-end
• justify-content: start
• justify-content: end
• justify-content: left
• justify-content: right
• justify-content: center
• justify-content: space-between
• justify-content: space-around
• justify-content: space-evenly
• justify-content: stretch (ведет себя как начало)
• justify-content: normal (ведет себя как растяжение, что ведет себя как начало)

В примере ниже значение justify-content равно space-between. Доступное пространство после отображения элементов распределяется между элементами. Левый и правый элементы выравниваются с началом и концом.

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

.box {
  display: flex;
  justify-content: space-between;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

Если основная ось находится в направлении блока из-за того, что flex-direction установлено в column, то justify-content будет распределять пространство между элементами в этом направлении, пока в контейнере есть пространство для распределения.

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

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

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

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

В приведенном ниже примере свойство direction установлено в значение rtl для принудительного использования режима записи справа налево для наших элементов. Вы можете удалить это свойство или изменить значения justify-content, чтобы увидеть, как Flexbox ведет себя, когда начало направления строки находится справа.

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

.box {
  direction: rtl;
  display: flex;
  justify-content: flex-end;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

Направление start линии также изменится, если вы измените свойство flex-direction — например, используя row-reverse вместо row.

В следующем примере flex-direction: row-reverse и justify-content: flex-end определяют направление и расположение элементов внутри контейнера Flex. В языке слева направо элементы выстраиваются слева. Попробуйте изменить flex-direction: row-reverse на flex-direction: row. Вы увидите, что элементы теперь перемещаются вправо, и визуальный порядок элементов меняется.

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

.box {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

Хотя все это может показаться немного запутанным, правило, которое следует запомнить, заключается в том, что, если вы не сделаете ничего, чтобы изменить это, элементы Flex выстраиваются в направлении, в котором слова выстраиваются в языке вашего документа вдоль оси строки.

start и flex-start будут там, где начинается начало предложения текста.

Вы можете переключиться на отображение в направлении блока для языка вашего документа, выбрав flex-direction: column. Тогда start и flex-start будут там, где начинается верхняя часть вашего первого абзаца текста.

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

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

Распространенным шаблоном является навигационная панель, где некоторые ключевые элементы выровнены справа, а основная группа — слева. Вы можете подумать, что это должен быть случай для свойства justify-self. Однако рассмотрите изображение ниже. Например, возьмите следующее изображение с тремя элементами с одной стороны и двумя с другой. Если бы justify-self работало с элементами Flex и было установлено на элементе d, оно также изменило бы выравнивание последующего элемента e, что может или не может соответствовать ожиданиям.

Вместо этого элемент d можно сдвинуть с помощью отступов CSS.

В этом живом примере элемент 4 отделен от первых трех элементов путем установки margin-left на auto, который потребляет все свободное пространство на своей оси. Именно так работает центрирование блока с margin автослева и автосправа. Каждая сторона пытается занять как можно больше места, и поэтому блок отодвигается в центр.

В этом живом примере элементы Flex расположены в строке со стандартными значениями Flex, а класс push, установленный на четвертом элементе, применяет margin-left: auto к этому элементу. Попробуйте удалить класс с четвертого элемента или добавить класс к другому элементу, чтобы увидеть, как это работает.

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

.box {
  display: flex;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}
.push {
  margin-left: auto;
}

Для создания отступа между элементами Flex используйте свойства gap, column-gap и row-gap. Свойство column-gap создает отступы между элементами в строке. Свойство row-gap создает отступы между строками Flex, когда свойство flex-wrap установлено в значение wrap.

Свойство gap — это сокращение, которое устанавливает оба свойства row-gap и column-gap. Отступ между элементами Flex или между строками Flex зависит от направления. Если свойство flex-direction создает строки, первое значение определяет отступ между строками Flex, а второе — отступ между элементами в каждой строке. При использовании столбцов (когда flex-direction установлено в column или column-reverse), первое значение определяет отступ между элементами Flex, а второе — отступ между строками Flex.

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

.box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 2em;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  flex: 1;
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

• Модуль CSS выравнивания блоков
• Модуль CSS гибкой компоновки
• Выравнивание блоков в Flexbox
• Выравнивание блоков в сетке