Как работает Flexbox: объясняем на гифках

Как работает Flexbox: объясняем на гифках

Разобраться

Светлана Шаповалова, коммерческий автор и переводчик, специально для «Нетологии» перевела статью Скотта Домеса, в которой он с помощью наглядных гифок рассказывает об основных свойствах Flexbox.

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

Чтобы верстать качественнее, изучим Flexbox с помощью анимации.

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

Звучит неплохо — проверим это на практике.

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

Свойство №1: Display: Flex

Например, у нас есть страница:

Как работает Flexbox: объясняем на гифках

Серый контейнер содержит четыре разноцветных блока разного размера. Сейчас они расположены по умолчанию display: block. При этом каждый прямоугольник занимает всю строку. Чтобы начать работу с Flexbox, необходимо превратить серый контейнер в flex-контейнер. Это очень просто:

#container {

display: flex;

}

Как работает Flexbox: объясняем на гифках

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

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

У Flexbox-контейнера две оси — основная и поперечная. По умолчанию это выглядит так:

Как работает Flexbox: объясняем на гифках

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

Свойство flex-direction в свою очередь позволяет вращать основную ось.

#container {

display: flex;

flex-direction: column;

}

Как работает Flexbox: объясняем на гифках

Важно учесть следующее: свойство flex-direction: column не выстраивает прямоугольники вдоль поперечной оси. Вместо этого основная ось просто из горизонтальной становится вертикальной. Кроме значение column свойства flex-direction может также принимать значения row-reverse и column-reverse.

Как работает Flexbox: объясняем на гифках

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

Justify-content контролирует выравнивание элементов вдоль основной оси. Здесь стоит глубже рассмотреть различия между основной/поперечной осями. Для начала установим flex-direction: row.

#container {

display: flex;

flex-direction: row;

justify-content: flex-start;

}

Существует пять значений для justify-content:

  1. Flex-start
  2. Flex-end
  3. Center
  4. Space-between
  5. Space-around

Как работает Flexbox: объясняем на гифках

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

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

И наконец, не забывайте, что justify-content выравнивает элементы вдоль основной оси, а flex-direction поворачивает ее. Это будет важным, когда вы приступите к…

…свойству №4: Align Items

Если вы справились с justify-content, освоить align-items будет несложно.

В то время как justify-content выравнивает элементы вдоль основной оси, align-items делает то же самое вдоль поперечной.

Как работает Flexbox: объясняем на гифках

Переключим flex-direction в значение row — теперь оси расположены, как показано на рисунке. Идем дальше — аlign-items может принимать значения:

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

Первые три аналогичны таким же значениям для justify-content, ничего сверхъестественного. Оставшиеся же отличаются.

Есть значение stretch: элементы равномерно вытягиватся вдоль поперечной оси; значение baseline выравнивает все элементы вдоль общей линии.

Как работает Flexbox: объясняем на гифках

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

Используя значение baseline, обратите внимание на теги абзацев — если убрать, то выравниваться будут основания прямоугольников.

Как работает Flexbox: объясняем на гифках

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

Как работает Flexbox: объясняем на гифках

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

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

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

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

#container {

align-items: flex-start;

}

.square#one {

align-self: center;

}

// Only this square will be centered.

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

Как работает Flexbox: объясняем на гифках

Вывод

Хотя мы сделали лишь беглый обзор некоторых свойств Flexbox, этого вам хватит, чтобы разобраться в основах выравнивания — и научиться вертикально выравнивать контент.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Читать еще

Обучение

Оцените статью

Средняя оценка 0 / 5. Всего проголосовало 0