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

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

На что обратить внимание? Flexbox упрощает верстку, позволяя реализовывать менее шаблонные идеи. Он пришел на смену командным способам позиционирования, которые применялись до CSS 3.0.

Что такое Flexbox

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

Ранее веб-разработчикам приходилось верстать страницы посредством CSS, position, float, других средств, изначально предназначенных совершенно для других задач. В частности, последний из перечисленных был нужен для того, чтобы задать инструкцию, с какой стороны будет выполняться обтекание элемента текстом, а не совокупностью других блоков. Подобное приспособление инструментов веб-дизайна для решения несвойственных им задач было связано с отсутствием специальных инструментов.

Для решения данной проблемы в 2009 году был разработан flexbox, который наряду с CSS Grid составляет элемент стандарта CSS 3, поэтому подключать его отдельно не требуется.

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

• Flex-контейнер. Блок, включающий в себя разные flex-элементы (flex item). Чтобы тот или иной блок превратить во flex-блок, для него нужно установить параметр display: flex либо display: inline-flex.
• Отличие flex от inline-flex состоит в том, что flex занимает всю ширину экрана. Inline-flex, в свою очередь, располагается на площади, которую занимают входящие в него элементы.
• Flex-элементы (flex items). Зависимые элементы flex-контейнера. Доступно изменение их положения на экране, масштаба, интервалов между ними.
• Основная ось (main axis).
• Направление расположения на экране flexbox-блоков.

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

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

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 32461

• Поперечная ось (cross axis). Ось, пересекающая основную ось.
• Основной размер (main size). Размер, равный направлению основной оси.
• Начало основной оси (main start). Точка на экране, от которой идут flex-элементы, находящиеся на основной оси.
• Окончание основной оси (main end). Точка, в которой заканчиваются flex-элементы, привязанные к основной оси.
• Поперечный размер (cross size). Размер, который совпадает с поперечной осью.

Свойства Flexbox

Направление

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

Интервал

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

Выравнивание

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

Выравнивание вдоль поперечной оси

Данный параметр необходим для определения расположения flex-элементов вдоль поперечной оси текущего столбца или строки.

Перенос

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

Читайте также!

PostgreSQL: мощная и надежная система управления базами данных

Подробнее

Выравнивание при переносе

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

Интервал от границ контейнера

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

Дополнительные свойства Flexbox

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

Order

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

.box—order {

order: 5;

}

CSS

Copy

Дарим скидку от 60%
на курсы от GeekBrains до 29 декабря

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

Чтобы было понятнее, рассмотрим конкретный пример:

<div class=»container»>

<div class=»box» style=»order: 5″>Box 1</div>

<div class=»box»>Box 2</div>

<div class=»box»>Box 3</div>

<div class=»box»>Box 4</div>

<div class=»box»>Box 5</div>

</div>

Markup

Copy

В данном коде первый бокс поставлен на место пятого, а на месте первого бокса стоит второй.

Так можно легко задать любую последовательность flex-элементов, не меняя HTML-синтаксис.

Flex-grow

Нередко после заполнения контейнера внутренними элементами в нем образуется свободное место, которое должно быть равномерно распределено между всеми flex-элементами. Атрибут flex-grow дает возможность установить увеличенный размер для flex-элемента, если в контейнере есть незанятое место. Программный код имеет следующий вид:

.box—flex-grow {

flex-grow: 1;

}

CSS

Copy

Число, которое мы указываем для flex-grow, обозначает коэффициент расширения.

Рассмотрим следующий пример:

<div class=»container container—flex»>

<div class=»box» style=»flex-grow: 2″>Box 1</div>

<div class=»box» style=»flex-grow: 1″>Box 2</div>

<div class=»box»>Box 3</div>

<div class=»box»>Box 4</div>

<div class=»box»>Box 5</div>

</div>

HTML

Copy

Здесь внутри контейнера присутствуют пять боксов, расположенные с одинаковым интервалом. В конце контейнера образуется незанятое место. Блоки с третьего по пятый имеют постоянный размер, а у первого бока стоит коэффициент расширения 2, поэтому он будет в два раза больше второго блока.

Flex-shrink

Атрибут дает возможность уместить flex-элементы внутрь контейнера меньшего размера. То есть эта функция обратна flex-grow. По умолчанию параметр CSS flex-shrink равен 1. Программный код:

.box—flex-shrink {

flex-shrink: 1;

}

CSS

Copy

Чтобы результат изменения параметра flex-shrink отобразился на странице, необходимо удалить атрибут flex-wrap.

Flex-basis

Flex-basis необходим для установки исходного размера flex-элемента. Код:

.box—flex-basis {

flex-basis: 100px;

}

CSS

Copy

Масштаб flex-элемента может быть изменен с помощью атрибута flex-basis. Пример:

<div class=»container container—flex»>

<div class=»box» style=»flex-basis: 100px»>Box 1</div>

<div class=»box»>Box 2</div>

<div class=»box»>Box 3</div>

<div class=»box»>Box 4</div>

<div class=»box»>Box 5</div>

</div>

Markup

Copy

Здесь для первого блока установлен исходный масштаб в 100 пикселей.

Только до 23.12

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

Для включения атрибутов flex-grow, flex-shrink и flex-basis необходимо применить параметр CSS flex, представляющий собой сокращённое свойство. Последовательность представлена ниже:

• flex-grow;
• flex-shrink;
• flex-basis.

Код:

.box—flex {

flex: 1 0 200px; /* grow — shrink — basis */

flex-grow: 1;

flex-shrink: 0;

flex-basis: 200px;

}

CSS

Copy

Align-self

Для выравнивания flex-элемента внутри контейнера применяется атрибут align-self. Его величина равна параметру align-items в родительской группе. Возможно переопределить выравнивание отдельно взятого блока.

Код:

.box—align-self {

align-self: flex-start;

}

CSS

Copy

Пример:

<div class=»container container—flex»>

<div class=»box»>Box 1</div>

<div class=»box»>Box 2</div>

<div class=»box»>Box 3</div>

<div class=»box»>Box 4</div>

<div class=»box» style=»align-self: flex-end»>Box 5</div>

</div>

Плюсы и минусы Flexbox

Достоинства flexbox:

• Гибкость. flexbox позволяет отказаться от использования традиционных сеток и легко настраивать расположение элементов в контейнере. Выравнивание блоков на экранах разного размера выполняется автоматически, не нужно задавать все параметры вручную.
• Адаптивность. Флексбокс позволяет избежать проблем с отображением страницы на разных устройствах. Автоматическая подстройка позволяет добиться соответствия ее замыслу дизайнера и на смартфоне, и на экране ПК.
• Удобное выравнивание. С помощью флексбокс оно делается гораздо проще и быстрее, чем при применении традиционных инструментов веб-дизайна. Из-за этой особенности flex часто используется для задач, для которых он изначально не предназначен, в частности, для корректного центрирования содержимого в блоке.
• Совместимость с подавляющим большинством браузеров. Flexbox существует и развивается уже не первый год, и работать с ним не могут только старые версии браузеров, которые установлены у единичных пользователей и давно уже не поддерживаются разработчиками соответствующего ПО.
• Адаптация под разные языки. Существует немало тех, в которых текст читается справа налево. Флекс позволяет легко адаптировать страницу для такого материала, включая его одновременное размещение на экране вместе с содержимым, представленным в традиционном порядке – слева направо.

Минусы flexbox:

• Возможность «выпадения». В основном недостатки кода вызываются особенностями расположения элементов. Может возникать проблема, когда текст оказывается нечитабельным, например, при использовании nowrap. При отключенной функции переноса слов они могут сжиматься по ширине, вызывая уменьшение интервалов между буквами, лексемами. Если ширина экрана невелика, то часть текста может оказаться за его границами. Чтобы избежать этого, следует заранее устанавливать атрибуты для защиты контейнера от переполнения.

  Читайте также!

  MongoDB: преимущества и особенности

  Подробнее
  
• Возможность расползания верстки. Выше уже была речь о параметре space-between, который позволяет автоматически растягивать элементы в контейнере. Но иногда эта опция приводит к серьёзному искажению содержимого и некорректному отображению страницы. Space-between удобен, если все пункты меню помещают в контейнер, но когда их слишком много и включен автоперенос, отдельные пункты попадают на следующую строку. Если их не больше двух, то они занимают место у краев экрана, а между ними образуется пустая область, что значительно искажает вид страницы. Эти особенности необходимо учитывать, планируя отображение контента на разных дисплеях.
• Сложности с двумерными сетками. Флексбокс позволяет построить двумерную сетку, в которой блоки размещены как бы на плоскости, а не параллельно линии. Для этого надо использовать специальный грид, иначе могут возникнуть проблемы с отображением.

Часто задаваемые вопросы о Flexbox

Для каких блоков лучше всего подходит flexbox?

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

Где применяется flexbox?

Flexbox очень популярен у следующих специалистов:

• Фуллстак-разработчики.
• Верстальщики.
• Фронтенд-разработчики.

Когда лучше осваивать flexbox?

Желательно переходить к изучению flexbox после того, как пройдено обучение по HTML и CSS. Иначе могут возникнуть сложности с использованием флексов и пониманием их функционала.

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование