Верстка на Flexbox – просто и понятно

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

Flexbox – это спецификация CSS, которая позволяет решить широкий спектр задач в вопросах верстки. С Флексбоксом можно удобно и легко распределять свободное пространство между элементами, производить выравнивание в нескольких направлениях, задавать размер объектов и много чего еще.

Это один из лучших инструментов в вопросах распределения и структуризации элементов на странице. Особенно он актуален в адаптивной верстке, когда на разных экранах расположение объектов изменяется. Флексбокс позволяет создать идеальную структуру, которая легко воспринимается и остается гибкой. Такой подход незаменим для страниц с элементами без четко указанных размеров, при необходимости создания плавающей сетки.

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

Для тех, кто еще далёк от тонкостей верстки стоит начать с увлекательного мастер-класса основателя школы WAYUP Андрея Гаврилова  «Основы HTML и CSS + верстка лендинга».

Достоинства Flexbox 

Идея создания прототипа Flexbox  появилась еще в 2008 году, тогда CSS Working Group заинтересовалась этой возможностью и уже через год опубликовала черновик. Сразу же частичную поддержку добавили Safari и Chrome, а через несколько лет уже и Opera. В 2012 спецификация значительно улучшается, а сегодня все основные браузеры поддерживают этот модуль.

Слово “flex” использовано в названии неспроста – блоки становятся как бы резиновыми, элементы можно растягивать и сжимать, как угодно. Интересная особенность – Flexbox адаптирован под языки, в которых используется написание справа налево. Еще одной характерной чертой Flexbox является присутствие рядов в поперечном направлении. Это дает возможность выравнивать не только отдельные объекты, но и ряды. 

Пример страницы, сделанной на Флексбокс:

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

Основы использования

Логичная и простая верстка позволяет без усилий задавать и изменять параметры объектов внутри Flex-контейнера: распределение свободного места, выравнивание, порядок расположения и т.д.

Главная ось изменяется функцией flex-direction, имеет фиксированные размеры и границы, но позволяет изменять пути распределения блоков посредством смены осей, поперечная ось расположена перпендикулярно главной. 

По умолчанию Main axis будет всегда горизонтальной и иметь направление вправо, а Cross axis – это вертикаль с направлением вниз. Но, как уже упоминалось, эти параметры можно изменить при необходимости, а также поменять местами оси. 

 

Чтобы из обычного блока получился пригодный к управлению флекс-элемент, необходимо создать флекс-контейнер с помощью функции display и поместить элемент в него. После этого блок начинает подчиняться правилам контейнера, можно указать размер колонки и добавить еще несколько – все они будут растягиваться как укажет пользователь. Без дополнительных указаний элементы занимают пространство равномерно, а с помощью свойств можно задать размер. 

Свойства Флексбокса:

• flex-basis – изначальный размер элемента по главной оси, может задаваться в разных единицах;

• flex-grow – определяет, насколько объект может захватывать пространство и превосходить по размерам другие блоки;

• flex-shrink – показатель, определяющий возможности сжимания объекта в сравнении с другими элементами страницы, базово показатель равен единице.

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

Одинаково растянуть все объекты с заполнением свободного места можно при указании параметра flex-grow:1. Можно один элемент сделать в сравнении с остальными больше, тогда нужно продумать их соотношение и применить значение функции. Например, в два раза больше будет элемент, если всем присвоить flex-grow:1, а тому, что требует увеличения – flex-grow:2. Соответственно, цифровое значение работает по принципам кратности – одинаковые структуры будут при параметрах 1:1:2 и 3:3:6. Значение не обязательно должно быть целым числом, можно достичь идеальных соотношений, играясь с дробными показателями.

Заключение

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

Если обобщить, то Flexbox является отличным решением для тех задач, которые в других системах бывают достаточно сложными или просто неудобными. К примеру, расположение нескольких блоков в ряд с равномерным распределением по всему свободному пространству, прижатие футера к низу, и т.д. Да, эти вопросы можно реализовать без Flexbox, но с ним точно получится намного удобнее, эффективнее и быстрее, если правильно применять инструменты. Научиться тонкостям верстки можно на курсе Веб-верстальщик: Код Фрилансера, где всего за три месяца интенсивного и увлекательного обучения можно получить современную востребованную профессию или повысить свою квалификацию, разобравшись в новых трендах и методах работы.

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