Как работает Flexbox: объясняем на гифках
Светлана Шаповалова, коммерческий автор и переводчик, специально для «Нетологии» перевела статью Скотта Домеса, в которой он с помощью наглядных гифок рассказывает об основных свойствах Flexbox.
Flexbox обещает спасти нас от мук привычного CSS: например, от вертикального выравнивания. Что ж, с заявленной целью он справляется. Однако не всегда получается приноровиться к нему с первой попытки.
Чтобы верстать качественнее, изучим Flexbox с помощью анимации.
В его основе лежит идея сделать верстку гибче и интуитивнее. Поэтому Flexbox позволяет контейнерам самостоятельно располагать дочерние элементы наиболее оптимальным образом, изменяя как их размеры, так и пространство между ними.
Звучит неплохо — проверим это на практике.
В этой статье мы рассмотрели 5 главных свойств Flexbox: как они работают, как их правильно использовать и как должен выглядеть конечный результат.
Свойство №1: Display: Flex
Например, у нас есть страница:
Серый контейнер содержит четыре разноцветных блока разного размера. Сейчас они расположены по умолчанию display: block. При этом каждый прямоугольник занимает всю строку. Чтобы начать работу с Flexbox, необходимо превратить серый контейнер в flex-контейнер. Это очень просто:
display: flex;
}
Изменилось не так много — блоки все также расположены друг за другом -, но это лишь на первый взгляд. На самом деле сделано намного больше — у блоков появилось свойство flex-контекстом. Оно позволит управлять ими проще, чем с помощью привычного CSS.
Свойство №2: Flex Direction
У Flexbox-контейнера две оси — основная и поперечная. По умолчанию это выглядит так:
По умолчанию любые элементы располагаются слева направо вдоль основной оси. Именно поэтому прямоугольники выстроились в горизонтальную линию, как только мы применили свойство display: flex.
Свойство flex-direction в свою очередь позволяет вращать основную ось.
display: flex;
flex-direction: column;
}
Важно учесть следующее: свойство flex-direction: column не выстраивает прямоугольники вдоль поперечной оси. Вместо этого основная ось просто из горизонтальной становится вертикальной. Кроме значение column свойства flex-direction может также принимать значения row-reverse и column-reverse.
Свойство №3: Justify Content
Justify-content контролирует выравнивание элементов вдоль основной оси. Здесь стоит глубже рассмотреть различия между основной/поперечной осями. Для начала установим flex-direction: row.
display: flex;
flex-direction: row;
justify-content: flex-start;
}
Существует пять значений для justify-content:
- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
Из этого списка 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 делает то же самое вдоль поперечной.
Переключим flex-direction в значение row — теперь оси расположены, как показано на рисунке. Идем дальше — аlign-items может принимать значения:
- flex-start
- flex-end
- center
- stretch
- baseline
Первые три аналогичны таким же значениям для justify-content, ничего сверхъестественного. Оставшиеся же отличаются.
Есть значение stretch: элементы равномерно вытягиватся вдоль поперечной оси; значение baseline выравнивает все элементы вдоль общей линии.
Обратите внимание, что для align-items: stretch высота прямоугольников задана как auto. В противном случае она переопределяет растяжение.
Используя значение baseline, обратите внимание на теги абзацев — если убрать, то выравниваться будут основания прямоугольников.
Чтобы лучше проиллюстрировать основную и поперечную оси, совместим justify-content и align-items, и увидим, как работает центрирование для каждого значения flex-direction:
Со значением row прямоугольники выстраиваются вдоль горизонтальной основной оси. Значение column заставляет их равняться по вертикальной основной оси.
Даже если отцентрировать прямоугольники и по вертикали, и по горизонтали — это не будут взаимозаменяемые значения.
Свойство №5: Align Self
Align-self позволяет вручную выравнивать отдельные элементы — управляя позиционированием каждого отдельного прямоугольника. Все свойства остаются прежними, при этом они по умолчанию выставлены как auto, поэтому наследуются значения align-items контейнера.
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Only this square will be centered.
Посмотрим, как это выглядит. К двум прямоугольникам мы применили align-self, к остальным — align-items: center и flex-direction: row.
Вывод
Хотя мы сделали лишь беглый обзор некоторых свойств Flexbox, этого вам хватит, чтобы разобраться в основах выравнивания — и научиться вертикально выравнивать контент.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
Полный текст статьи читайте на Нетология
