1 708 
Оставить комментарий
Сохранить статью:
Что это такое? Flexbox – метод позиционирования в CSS, позволяющий управлять разными элементами веб-страницы. Расположение определяется автоматически, по ранее заданным для каждого блока свойствам.
На что обратить внимание? Flexbox упрощает верстку, позволяя реализовывать менее шаблонные идеи. Он пришел на смену командным способам позиционирования, которые применялись до CSS 3.0.
В статье рассказывается:
- Что такое Flexbox
- Свойства Flexbox
- Дополнительные свойства Flexbox
- Плюсы и минусы Flexbox
- Часто задаваемые вопросы о Flexbox
-
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.Бесплатно от Geekbrains
Что такое 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 ₽/мес
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
- Поперечная ось (cross axis). Ось, пересекающая основную ось.
- Основной размер (main size). Размер, равный направлению основной оси.
- Начало основной оси (main start). Точка на экране, от которой идут flex-элементы, находящиеся на основной оси.
- Окончание основной оси (main end). Точка, в которой заканчиваются flex-элементы, привязанные к основной оси.
- Поперечный размер (cross size). Размер, который совпадает с поперечной осью.
Свойства Flexbox
Направление
Параметр, который нужен для задания основной оси и направления, в котором следуют все включенные элементы страницы.
| Параметр | Назначение | Основная ось |
| row | Flex-элементы располагаются вдоль строки написания текста (в частности, для русского – слева направо) | Горизонтальная |
| row-reverse | Flex-элементы располагаются вдоль строки в направлении, обратном порядку текста (в частности, для русского языка – справа налево) | Горизонтальная |
| column | Flex-элементы располагаются вдоль столбцов в направлении, аналогичном порядку контента (обычно сверху вниз) | Вертикальная |
| column-reverse | Flex-элементы располагаются вдоль столбцов в направлении, обратном расположению контента (обычно снизу вверх) | Вертикальная |
Интервал
Данный параметр нужен для того, чтобы установить интервалы между flex-элементами. Возможен их автоматический подбор или выбор определённого значения вручную.
| Тип | Назначение |
| Стандартный | Flex-элементы в автоматическом режиме располагаются внутри flex-контейнера с учетом переносов и выравниваний вдоль основной и поперечной осей |
| Фиксированный | Flex-элементы расположены по предустановленным интервалам между зависимыми элементами, интервалам между ними и границам контейнера |
Выравнивание
Данный параметр необходим для определения порядка расположения flex-элементов на основной оси. Это значение можно настроить, если задан стандартный интервал.
| Параметр | Назначение |
| flex-start | Flex-элементы располагаются в начале строки либо столбца |
| flex-end | Flex-элементы располагаются в конце строки либо столбца |
| center | Flex-элементы располагаются в середине основной оси |
| space-between | Flex-элементы размещаются вдоль основной оси таким образом, чтобы первый блок находился в начале контейнера, а последний в конце |
| space-around | Flex-элементы размещены вдоль основной оси: первый блок – в начале контейнера, а последний в конце с отступами от границы контейнера, равными половине интервала |
| space-evenly | Flex-элементы располагаются вдоль основной оси с интервалом между всеми элементами, который остается неизменным для первого и последнего элементов |
Выравнивание вдоль поперечной оси
Данный параметр необходим для определения расположения flex-элементов вдоль поперечной оси текущего столбца или строки.
| Параметр | Назначение |
| flex-start | Flex-элементы размещаются от начала поперечной оси |
| flex-end | Flex-элементы размещаются от конца поперечной оси |
| center | Flex-элементы размещаются в центре поперечной оси |
| stretch | Flex-элементы распределяются по всей ширине поперечной оси |
| baseline | Flex-элементы распределяются вдоль поперечной с сохранением одинакового уровня базовой линии каждого из них |
Перенос
Данный параметр используется для переноса элементов внутри контейнера. Задать соответствующее значение можно при стандартном интервале.
| Параметр | Назначение |
| nowrap | Flex-элементы распределяются вдоль одного столбца или строки |
| wrap | Flex-элементы располагаются в несколько строк, если они не могут поместиться в одну строку или столбец |
| wrap-reverse | Flex-элементы располагаются в несколько строк или столбцов вдоль поперечной оси, при условии, что их ширина недостаточна для всех блоков |
Выравнивание при переносе
Данный параметр используется для управления расположением внутри flex-контейнеров нескольких столбцов или строк вдоль поперечной оси, пересекающей основную. Чтобы изменить этот параметр, должны быть установлены перенос и стандартной интервал.
| Параметр | Назначение |
| flex-start | Столбцы и строки размещаются внутри контейнера в начале, без интервалов |
| flex-end | Столбцы и строки размещаются в конце контейнера без интервалов |
| center | Столбцы и строки выравниваются по центру вдоль поперечной оси |
| stretch | Столбцы и стоки располагаются вдоль поперечной оси таким образом, чтобы оказалось занято все пространство, если не задана постоянная высота |
| space-between | Столбцы и строки располагают вдоль поперечной оси с равными расстояниями между ними, первый и последний столбец или строка находятся в начале и конце контейнера |
| space-around | Столбцы и строки располагаются на одинаковом расстоянии друг от друга, промежуток от элемента до границы контейнера составляет половину интервала |
Интервал от границ контейнера
Данный параметр используется для того, чтобы задать интервал в пикселях от flex-контейнера до внешнего блока, если установлен постоянный интервал.
Дополнительные свойства Flexbox
В предыдущем тексте мы говорили о параметрах, которые могут быть установлены для flex-контейнера. В нем, в свою очередь, находятся дочерние flexbox-элементы, для которых могут задаваться следующие атрибуты:
Order
Параметр определяет последовательность элементов и используется исключительно для блоков, находящихся внутри flex-контейнера, но не для всего контейнера. Программный код выглядит так:
.box—order {
order: 5;
}
CSS
Copy
на курсы от GeekBrains до 05 мая
Чтобы было понятнее, рассмотрим конкретный пример:
<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 пикселей.
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Для включения атрибутов 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. При отключенной функции переноса слов они могут сжиматься по ширине, вызывая уменьшение интервалов между буквами, лексемами. Если ширина экрана невелика, то часть текста может оказаться за его границами. Чтобы избежать этого, следует заранее устанавливать атрибуты для защиты контейнера от переполнения.
- Возможность расползания верстки. Выше уже была речь о параметре space-between, который позволяет автоматически растягивать элементы в контейнере. Но иногда эта опция приводит к серьёзному искажению содержимого и некорректному отображению страницы. Space-between удобен, если все пункты меню помещают в контейнер, но когда их слишком много и включен автоперенос, отдельные пункты попадают на следующую строку. Если их не больше двух, то они занимают место у краев экрана, а между ними образуется пустая область, что значительно искажает вид страницы. Эти особенности необходимо учитывать, планируя отображение контента на разных дисплеях.
- Сложности с двумерными сетками. Флексбокс позволяет построить двумерную сетку, в которой блоки размещены как бы на плоскости, а не параллельно линии. Для этого надо использовать специальный грид, иначе могут возникнуть проблемы с отображением.
Часто задаваемые вопросы о Flexbox
Для каких блоков лучше всего подходит flexbox?
Как правило, флекс используется для построения одномерной сетки и расположения блоков внутри неё, при необходимости задав их положение лишь в одном направлении. Если надо разместить крупные блоки по всей странице, то с этой задачей flexbox справляется гораздо хуже.
Где применяется flexbox?
Flexbox очень популярен у следующих специалистов:
- Фуллстак-разработчики.
- Верстальщики.
- Фронтенд-разработчики.
Когда лучше осваивать flexbox?
Желательно переходить к изучению flexbox после того, как пройдено обучение по HTML и CSS. Иначе могут возникнуть сложности с использованием флексов и пониманием их функционала.
Разберем 11 самых важных жизненных вопросов
Только до 
Эксклюзивные лекции по основам программирования
