Flexbox: как использовать его правильно

Рассказываем, как упростить работу с макетами с помощью модуля Flexbox.

Flexbox («флексбокс» или «флексы») — это CSS-модуль для создания гибких и адаптивных макетов. Он помогает адаптировать веб-страницы под разные устройства и удобно располагать элементы. Например, с помощью Flexbox можно управлять выравниванием, отступами и размерами элементов.

Работать с флексами учат на курсе «Фулстек-разработчик». Студенты с нуля за 16 месяцев научатся создавать сайты и приложения. После завершения курса в арсенале выпускников будут 13 проектов для портфолио, софт-скилы для работы в IT и диплом о профессиональной переподготовке.

Изначально веб-разработчики сталкивались с трудностями при управлении элементами в HTML. Использование костылей часто приводило к сложностям при выравнивании элементов и их размера.

Чтобы решить эти проблемы, в 2009 году была предложена концепция Flexbox. Основной целью было создание простого способа управления размещением элементов в контейнере. Уже в 2012 году модуль Flexbox был окончательно утверждён как часть W3C.

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

Свойства флексов можно разделить на два основных типа: свойства флекс-контейнера и свойства флекс-элементов. Для начала посмотрим, что входит в свойства флексбокс.

Теперь рассмотрим свойства flex-элементов. Они применяются к дочерним элементам внутри флекс-контейнера и помогают управлять их масштабами и гибкостью. Всего свойств флекс-элементов пять.

1. Flex-grow — устанавливает изменение одного элемента внутри flex-контейнера по отношению к остальным. Это упрощает разработку адаптивных макетов. Например, работу flex-grow можно увидеть при отображении таблиц в десктопной и мобильной версиях сайтов.
Работать flex-grow будет только при наличии свободного места, иначе контейнер просто не позволит менять размер элемента. Чтобы установить размер элемента, нужно задать числовое значение, которое укажет масштаб изменения относительно других элементов.
При одинаковом значении элементы поделят свободное пространство поровну. Элемент с большим значением займёт больше места. Соответственно, элементы с меньшим значением займут меньше места. Например, есть три элемента с flex-grow-значениями 1, 2 и 1. Элемент 2 займёт в два раза больше свободного пространства, чем другие. Вот как это будет выглядеть:

2. flex-shrink — устанавливает масштаб сжатия элемента по сравнению с остальными. Это полезно в ситуациях, когда контейнер меньше, чем ширина или высота элементов. Это свойство сжимает элементы вслед за контейнером, тем самым исключая переполнение. При этом с flex-shrink можно не бояться, что элементы нарушат структуру макета при сжатии.
flex-shrink полезен только в ограниченном пространстве. Он работает по похожей технологии, как flex-grow. Только элемент с большим значением будет уменьшаться сильнее по сравнению с другими.

3. flex-basis — устанавливает размер элемента до применения других свойств. Он утверждает ширину или высоту элемента, которые будут применяться для распределения места внутри контейнера. Значение может быть задано любых единицах измерения, например в пикселях или процентах. Если flex-basis не задан, элемент будет использовать изначальную ширину или высоту.

4. align-self — устанавливает выравнивание элемента внутри контейнера. Переопределяет значение align-items, которое применяется ко всем элементам контейнера. Это помогает индивидуально настраивать позиционирование элемента, даже если другие элементы выровнены иначе.
В столбце элемент выравнивается по вертикали. В строчке — по горизонтали. Существуют несколько возможных значений для align-self:

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

Представим, что в HTML есть

В готовом флекс-контейнере можно установить направление элементов — например, строку и столбец. Важно помнить про концепцию осей при установке флекс-направлений. На флексах можно иметь основную и поперечную оси.

Когда направление флексов состоит из строки, основная ось находится в горизонтальном направлении, а поперечная — в вертикальном. Когда направление состоит из столбца — всё наоборот: основная ось находится в вертикальном направлении, а поперечная — в горизонтальном. Код и результат будут выглядеть так:

Теперь посмотрим, как работает свойство flex-wrap. Оно позволяет элементам во флекс-контейнере группироваться, если места не хватает. Код и результат будут такими:

На схеме видно, что при использовании flex-wrap элементы формируют собственную линию. Два нижних элемента заняли всё свободное место контейнера. Это важно учитывать при применении этого свойства.

Теперь попробуем выровнять элементы в пространстве. Для этого посмотрим, как это работает, на нескольких выравнивающих свойствах флексбокс. Представим, что у контейнерного div есть четыре элемента. Три элемента в строку, один — в столбец.

В CSS можно использовать align self, чтобы выравнивать элементы, то есть дать различное расположение каждому элементу. Код и результат будут такими:

Вместо выравнивания каждого элемента можно объединить все элементы в контейнере. Для этого можно использовать justify-content. Код и результат будут такими: