Введение в Flexbox

На прошлой неделе мы изучили CSS Grid и узнали, как с его помощью создать универсальную систему сеток.

Сегодня хотелось бы поговорить о Flexbox. Давайте разбираться!

Что такое Flexbox

Flexbox — способ создания гибких макетов, расположенных в виде столбцов или строк.

В CSS Grid вы задаёте макет, а содержимое (текст, изображения и т. д.) оборачивается сеткой и изменяет размер, чтобы вместить его в контейнеры. При использовании Flexbox вы задаёте макет, а контейнеры подстраиваются и изменяют размер под содержимое, которое вы в них помещаете.

Именно поэтому он называется Flexbox.

Создание макета Flexbox

Например, представьте, что есть div с классом .grid-flex, а в него вложены два элемента.

<div class="grid-flex">
  <div>1</div>
  <div>2</div>
</div>

Мы хотим, чтобы вложенные элементы располагались рядом друг с другом в ряд.

Для начала определим свойство display для класса .grid-flex со значением flex.

.grid-flex {
  display: flex;
}

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

See the Pen

Flexbox автоматически растягивается

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

Представим, что в одном из элементов текст длиннее, чем в другом...

<div class="grid-flex">
  <div>1</div>
  <div>234567890</div>
</div>

Flexbox автоматически увеличит размер второго div, чтобы вместить более длинный текст.

See the Pen

Добавление gap

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

.grid-flex {
  display: flex;
  gap: 1rem;
}

See the Pen

Строки и столбцы

По умолчанию flexbox выравнивает элементы в строке/row. Это можно изменить, установив flex-direction на column.

.grid-flex {
  flex-direction: column;
}

flex-direction определяет первичную и вторичную оси (это важно, когда мы начинаем выравнивать объекты).

Для flex-direction: row первичная ось — левая и правая (или горизонтальная), а вторичная — верхняя и нижняя (или вертикальная). Для flex-direction: column всё наоборот.

Выравнивание

Flexbox предлагает несколько способов выравнивания контента…

Первичная ось

Свойство justify-content указывает Flexbox, как выровнять контейнеры по первичной оси, и имеет несколько возможных значений...

• flex-start — Размещает элементы с начала (по умолчанию)
• flex-end — Размещает элементы с конца
• center — Размещает элементы вокруг центра
• space-between — Равномерное распределение элементов. Первый элемент — вровень с началом. Последний — вровень с концом.
• space-around — Равномерное распределение элементов. Начальный и конечный промежутки в два раза меньше, чем промежуток между элементами.
• space-evenly — Равномерное распределение элементов. Начальный, промежуточный и конечный промежутки имеют одинаковый размер.

Наличие всех этих возможностей очень мощно, но в то же время немного запутывает.

Я считаю, что наличие демонстрации, позволяющей наглядно увидеть различия, очень полезно.

See the Pen

Вторичная ось

Аналогично, свойство align-items указывает flexbox, как выровнять контейнеры по вторичной оси.

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

• stretch — Растянуть контейнеры до размера самого большого (по умолчанию).
• flex-start — Выравнивание элементов по началу оси
• flex-end — Выравнивание элементов по концу оси
• center — Выравнивание элементов по оси

И снова демонстрация этих свойств в действии.

See the Pen

Перенос

По умолчанию Flexbox будет располагать весь контент на одной линии вдоль первичной оси.

Хотя он подстраивает контейнеры под содержимое, иногда содержимого оказывается слишком много для имеющегося пространства. В таких ситуациях содержимое выходит за пределы родительского контейнера и приводит к горизонтальной или вертикальной прокрутке.

Вы можете использовать свойство flex-wrap со значением wrap, чтобы указать Flexbox на необходимость переноса контента на другую строку.

.grid-flex {
  display: flex;
  flex-wrap: wrap;
}

Демонстрация flex-wrap в действии.

See the Pen

Расширенные возможности

Как видите, Flexbox умеет очень много!

Один момент, который не был рассмотрен в этой статье, — определение того, как содержимое Flexbox увеличивается и уменьшается. С помощью свойств flex-basis, flex-grow и flex-shrink можно сделать много интересного.

Но это также быстро становится очень сложным. И, честно говоря, именно в таких ситуациях я предпочитаю использовать CSS Grid.

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