Как работает Flexbox — объясняем на больших, красочных GIF’ках

Flexbox обещает спасти нас от зла простого CSS (такого как вертикальное выравнивание).

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

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

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

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

В принципе, всё это хорошо звучит. Но давайте посмотрим как это выглядит на практике.

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

Свойство #1: display: flex

Вот наш пример веб-страницы:

Layout example

У вас есть четыре цветных блока разных размеров, находящихся в сером контейнере. На данный момент, у каждого блока по умолчанию установлено свойство display: block.  Таким образом, каждый прямоугольник занимает всю ширину линии на которой он находится.

Для того чтобы начать работать с Flexbox, вам нужно превратить ваш контейнер во flex-контейнер. Это также легко как:

Flex-контейнер

Не многое изменилось — теперь ваши блоки отображаются в одну линию, вот и всё. Но за кулисами, вы сделали что-то мощное. Вы дали вашим прямоугольникам то, что называется flex-контекстом.

Теперь вы можете начать позиционировать их в этом контексте, с гораздо меньшими трудностями чем в традиционном CSS.

Свойство #2: Flex Direction

У Flexbox контейнера есть две оси: основная ось и пересекающая ось, которые по умолчанию выглядят следующим образом:

Оси Flexbox

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

Однако flex-direction, позволяет вам вращать основную ось.

Flex Direction

Есть одно важное различие, которое следует здесь упомянуть: flex-direction: column не выравнивает прямоугольники по пересекающей оси вместо основной. Он поворачивает саму основную ось из горизонтального положения в вертикальное.

Flex Direction

Свойство #3: Justify Content

Justify-content управляет выравниванием элементов на основной оси.

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

В вашем распоряжении есть пять команд для использования их в justify-content:

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around

Justify Content

Space-around и space-between наименее интуитивны. Space-between делает равное расстояние между прямоугольниками, но не между прямоугольниками и контейнером.

Space-around делает одинаковое расстояние с каждой стороны прямоугольника — что собственно означает, что пространство между крайними прямоугольниками и контейнером вдвое меньше, чем между двумя прямоугольниками (каждый из прямоугольников привносит равный, не пересекающийся отступ, что собственно удваивает расстояние).

Заключительное замечание: запомните, что justify-content работает вдоль основной оси а  flex-direction переключает основную ось. Это очень важно для перехода на…

Свойство #4: Align Items

Если вы освоили justify-content, то align-items покажется вам лёгким ветерком.

Как justify-content работает вдоль основной оси, так align-items применяется к пересекающей оси.

Оси Flexbox

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

А теперь, углубимся в команды align-items.

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline

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

Однако, следующие два немного отличаются.

Есть stretch, при котором элементы занимают всю полноту пересекающей оси и baseline, при котором они выравниваются в нижней части тегов параграфа.

Align Items

(Обратите внимание что для align-items: stretch я должен был установить значение высоты прямоугольников на auto. В противном случае свойство height будет переопределять stretch.)

Для baseline следует помнить, что если вы убираете теги параграфа, он выровняет нижнюю часть прямоугольников, например так:

Align Items

Для того чтобы лучше продемонстрировать основную и пересекающую оси, давайте совместим свойства justify-content и align-items, и посмотрим как работает различное центрирование для двух flex-direction команд:

Демонстрация центрирования элементов в Flexbox

С row прямоугольники выстраиваются вдоль горизонтальной основной оси. С column они опускаются вдоль вертикальной основной оси.

Даже если прямоугольники расположены по центру в обоих случаях (как по вертикали, так и по горизонтали), они не являются взаимозаменяемыми!

Свойство #5: Align Self

Align-self позволяет вам вручную управлять выравниванием одного конкретного элемента.

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

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

Align Self

Заключение

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

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

Спасибо за то что прочитали!

Комментарии

Добавить комментарий

  • Антон

    Спасибо. Отлично все представлено!

  • Дмитрий

    Спасибо, здорово! Ясно и понятно))

  • Nikita Knyazev

    Давно хотел разобраться с flexbox. Спасибо!

  • Вася Пупкин

    Хотим еще гиф)))

  • Sergey Gromkov

    Круть. Спасибо

  • Канбото Мыктыбек

    да очень полезная статья! Буду теперь почаще применять flex

  • Sanya Bohatskii

    Good!

  • Сергей Осипенко

    Очень доступно, хотелось-бы больше анимированных статей по flexbox, для более глубокого познания.

  • Vadim Drigin

    Спасибо за наглядности и примеры

  • Nikita Mihalyov

    Хоть уже и не первый раз работал с flex’ами, только что узнал про основную и пересекающую оси
    Полезные вещи в приятном формате

  • Артём Тимченко

    super!!!

  • Araya Tailor

    Safari vs Flexbox. Have you some problem with accessability?

  • reskwer

    Класс, автор респект, оригинально и очень быстро пережувал информацию, спасибо