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

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

Базовый пример

В этом примере три элемента 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;
  border: 2px dotted rgb(96 139 168);
}

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

Оси и flex-direction

Flexbox учитывает режим записи документа, поэтому, если вы работаете с английским языком и задаёте 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

Выравнивание по поперечной оси

В flexbox нет justify-self

На главной оси Flexbox обрабатывает наш контент как группу. Вычисляется необходимое пространство для выкладки элементов, а оставшееся пространство затем доступно для распределения. Свойство justify-content управляет тем, как используется это оставшееся пространство. Установив justify-content: flex-end, дополнительное пространство размещается перед элементами; justify-content: space-around, оно размещается по обе стороны элемента в данном измерении и т.д.

Это означает, что свойство justify-self не имеет смысла в flexbox, так как мы всегда имеем дело с перемещением всей группы элементов.

На поперечной оси align-self имеет смысл, так как у нас потенциально есть дополнительное пространство в контейнере flex в этом измерении, в котором отдельный элемент может быть перемещён в начало и конец.

Выравнивание и авто-отступы

В flexbox есть определённый случай использования, где мы можем подумать, что нам нужно свойство justify-self, и это происходит, когда мы хотим разделить набор элементов flex, например, для создания разделительной навигации. Для этого случая мы можем использовать отступ auto. Отступ, установленный в auto, поглотит всё доступное пространство в своём измерении. Так работает центрирование блока с авто-отступами. Установив левый и правый отступ в auto, обе стороны нашего блока пытаются занять всё доступное пространство и таким образом вставляют блок в центр.

Установив margin в auto для одного элемента в наборе элементов flex, все выровненные в начало, мы можем создать разделительную навигацию. Это хорошо работает с flexbox и свойствами выравнивания. Как только пространство для авто-отступа станет недоступным, элемент ведёт себя так же, как и все остальные элементы flex, и уменьшается, пытаясь поместиться в пространство.

<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);
}
.push {
  margin-left: auto;
}

Свойства `gap`

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

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

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

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

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

.box > * {
  flex: 1;
}

Справочник

Свойства CSS

Элементы глоссария

Руководства

Выравнивание элементов в flexbox

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox