Направление и распределение элементов в Flexbox

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

Для этого особенно есть три свойства:

• flex-direction — определяет направление главной оси;
• justify-content — управляет расположением элементов вдоль главной оси;
• align-items — выравнивает элементы вдоль поперечной оси.

Чтобы правильно ими пользоваться, сначала нужно разобраться с главной и поперечной осями.

Главная и поперечная оси

У каждого flex-контейнера есть две оси:

• главная ось (main axis);
• поперечная ось (cross axis).

По умолчанию главная ось направлена слева направо, а поперечная — сверху вниз.

Именно относительно этих осей работают свойства Flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

justify-content работает вдоль главной оси, а align-items — вдоль поперечной. При стандартном направлении главная ось горизонтальная, поэтому justify-content управляет расположением элементов по горизонтали, а align-items — по вертикали.

Направление осей можно менять. Для этого используется flex-direction.

Flex-direction

Свойство flex-direction определяет направление главной оси и, соответственно, направление расположения flex-элементов.

У свойства четыре значения:

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

По умолчанию используется row.

row

При row элементы располагаются в строку, главная ось направлена горизонтально:

.container {
  display: flex;
  flex-direction: row;
}

column

При column главная ось становится вертикальной:

.container {
  display: flex;
  flex-direction: column;
}

Элементы располагаются сверху вниз.

И здесь появляется один из самых важных принципов Flexbox. flex-direction меняет не просто направление элементов. Он меняет направление главной оси.

Поэтому после переключения с row на column меняется и направление, в котором работают свойства, связанные с главной осью. С его помощью мы как бы «поворачиваем» оси на 90 градусов.

row-reverse

При row-reverse элементы располагаются вдоль горизонтальной оси в обратном направлении:

.container {
  display: flex;
  flex-direction: row-reverse;
}

То есть направление главной оси меняется на противоположное.

column-reverse

column-reverse делает то же самое для вертикального направления:

.container {
  display: flex;
  flex-direction: column-reverse;
}

Элементы располагаются снизу вверх.

Justify-content

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

.container {
  display: flex;
  justify-content: center;
}

При стандартном flex-direction: row элементы будут расположены по центру горизонтально.

Но если изменить направление:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

главная ось станет вертикальной.

Теперь justify-content: center будет центрировать элементы по вертикали.

justify-content определяет, как элементы будут расположены в этом пространстве.

flex-start

Элементы располагаются у начала главной оси:

.container {
  display: flex;
  justify-content: flex-start;
}

При row они окажутся слева.

При column — сверху.

center

Элементы располагаются по центру главной оси:

.container {
  display: flex;
  justify-content: center;
}

При row — по центру горизонтально.

При column — по центру вертикально.

flex-end

Элементы располагаются у конца главной оси:

.container {
  display: flex;
  justify-content: flex-end;
}

При row они окажутся справа.

При column — снизу.

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

Для этого используются:

• space-between;
• space-around;
• space-evenly.

space-between

При space-between первый элемент располагается у начала главной оси, последний — у конца, а свободное пространство распределяется между элементами.

.container {
  display: flex;
  justify-content: space-between;
}

Например:

<div class="toolbar">
  <h2>Документы</h2>
  <button>Создать</button>
</div>

Можно разнести элементы по противоположным сторонам контейнера:

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

space-around

При space-around свободное пространство распределяется вокруг каждого элемента:

.container {
  display: flex;
  justify-content: space-around;
}

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

space-evenly

При space-evenly все промежутки становятся одинаковыми:

.container {
  display: flex;
  justify-content: space-evenly;
}

Одинаковым будет расстояние:

• от начала контейнера до первого элемента;
• между первым и вторым элементом;
• между вторым и третьим;
• от последнего элемента до конца контейнера.

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

justify-content становится заметен тогда, когда внутри главной оси остается свободное место.

Align-items

Теперь разберемся со второй осью.

Свойство align-items управляет выравниванием flex-элементов вдоль поперечной оси, например:

.container {
  display: flex;
  align-items: center;
}

При стандартном flex-direction: row поперечная ось направлена вертикально, поэтому align-items: center выровняет элементы по вертикальному центру контейнера.

flex-start

Элементы выравниваются у начала поперечной оси:

.container {
  display: flex;
  align-items: flex-start;
}

При flex-direction: row элементы будут выровнены по верхнему краю.

center

Элементы выравниваются по центру поперечной оси:

.container {
  display: flex;
  align-items: center;
}

При flex-direction: row элементы будут выровнены по вертикальному центру.

Это особенно часто используется для строк с иконками, текстом и кнопками:

.row {
  display: flex;
  align-items: center;
}

flex-end

Элементы выравниваются у конца поперечной оси:

.container {
  display: flex;
  align-items: flex-end;
}

При flex-direction: row это означает выравнивание по нижнему краю.

stretch

При stretch flex-элементы растягиваются по поперечной оси, если их размер в этом направлении не задан явно. Это значение по умолчанию:

.container {
  display: flex;
  align-items: stretch;
}

При горизонтальном направлении элементы могут растянуться по высоте контейнера.

Align-items и flex-direction

Как и justify-content, align-items зависит не от направления экрана, а от осей flex-контейнера.

Например:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Теперь главная ось вертикальная, а поперечная — горизонтальная.

Поэтому align-items: center будет центрировать элементы по горизонтали.

Justify-content и align-items вместе

В большинстве реальных интерфейсов эти свойства используются одновременно.

Например:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

При стандартном row:

• justify-content центрирует элементы по горизонтали;
• align-items центрирует элементы по вертикали.

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

Что нужно запомнить

Если свести материал к нескольким правилам:

1. flex-direction определяет направление главной оси.

2. По умолчанию главная ось горизонтальная:

flex-direction: row;

3. column делает главную ось вертикальной:

flex-direction: column;

4. justify-content работает вдоль главной оси.

5. align-items работает вдоль поперечной оси.

6. justify-content и align-items могут менять свое направление в зависимости от направления осей.

7. space-between, space-around и space-evenly распределяют свободное пространство между элементами.