Выравнивание с помощью флексбоксов

Выравнивание является большой частью флексбоксов. Помимо обычных свойств выравнивания в CSS, есть свойства, которые были специально разработаны для флексбоксов.

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

Вот основные свойства из этой спецификации, которые связаны с флексбоксами.

Свойство align-items

Свойство align-items указывает значение align-self по умолчанию для всех флекс-элементов, участвующих в контексте форматирования флекс-контейнера.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
  display: flex;
  align-items: center;
  background-color: beige;
  height: 100vh;
}
.wrapper > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}
body {
  margin: 0;
}
</style>
<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

В этом примере мы применяем align-items: center к флекс-контейнеру, поэтому все флекс-элементы выравниваются по центру оси блока.

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

Свойство align-self

Свойство align-self выравнивает блок внутри содержащего его блока вдоль оси блока, оси колонки или перекрёстной оси.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
  display: flex;
  align-items: center;
  background-color: beige;
  height: 100vh;
}
.wrapper > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  align-self: flex-start;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  align-self: flex-end;
}
body {
  margin: 0;
}
</style>
<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Здесь у красного флекс-элемента задано значение flex-start, а у синего значение flex-end. Это перемещает красный элемент в начало, а синий — в конец. Однако мы не установили значение для зелёного элемента. Поэтому он использует значение по умолчанию, которое в данном случае устанавливается как center с помощью align-items для флекс-контейнера.

Свойство justify-content

Свойство justify-content выравнивает целиком всё содержимое флекс-контейнера по главной оси.

В этом примере мы используем значение space-between, что приводит к одинаковому промежутку между элементами, каждый из которых выровнен относительно своего края.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
  display: flex;
  justify-content: space-between;
  background-color: beige;
  height: 100vh;
}
.wrapper > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}
body {
  margin: 0;
}
</style>
<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Свойство align-content

Свойство align-content похоже на justify-content, за исключением того, что align-content выравнивает вдоль поперечной оси.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: beige;
  height: 100vh;
}
.wrapper > div {
  padding: 10px;
  width: 60%;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}
body {
  margin: 0;
}
</style>
<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Свойство place-content

Свойство place-content является сокращением для justify-content и align-content.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
  display: flex;
  flex-wrap: wrap;
  place-content: space-between center;
  background-color: beige;
  height: 100vh;
}
.wrapper > div {
  padding: 10px;
  width: 60%;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}
body {
  margin: 0;
}
</style>
<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

margin

Вы по прежнему можете использовать margin для флекс-элементов. Вот пример применения margin: auto ко флекс-элементу, даже после того, как он был выровнен с помощью других свойств выравнивания.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: beige;
  height: 100vh;
}
.wrapper > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  align-self: flex-start;
  margin: auto;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  align-self: flex-end;
}
body {
  margin: 0;
}
</style>
<div class="wrapper">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 22.10.2019
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid