Знакомство с Flexbox

Модуль гибких блоков (англ. Flexible Box Layout Module) был представлен W3C как более эффективный инструмент для создания разметки, выравнивания и распределения элементов на веб-странице, даже если их размеры неизвестны (отсюда и слово «flex», что в переводе с английского означает «гибкость»).

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

Отличия Flexbox от обычной разметки

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

Почему так сложно сделать обычный макет, используя привычные средства CSS? Дело в том, что HTML и CSS развивались очень стремительно. Сегодня с помощью CSS вы можете сотворить с веб-страницей практически всё что угодно. Но в самом начале, когда инструментов было не так много, веб-разработчики использовали доступные возможности для создания макетов. Именно поэтому раньше многие сайты верстались с помощью таблиц, так как это был единственный удобный способ управлять расположением элементов на странице. Позже разработчики стали использовать в макетах свойство loat, а также inline-block. А вертикальное выравнивание элементов — головная боль почти каждого верстальщика.

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

Преимущества Flexbox

Flexbox — мощный модуль, который включает в себя большой набор свойств и обладает большими возможностями. Рассмотрим основные преимущества flexbox:

• Блоки легко становятся гибкими, элементы могут сжиматься и растягиваться, заполняя пространство.
• Нет никаких проблем с тем, чтобы выровнять элементы по вертикали и горизонтали.
• Неважно, в каком порядке расположены HTML-элементы. Вы можете изменить их порядок через CSS.
• Элементы могут самостоятельно выстраиваться в ряд или образовывать столбец.
• Очень простая адаптация под направление текста RTL (right-to-left). Если в браузере установлена локаль RTL, все flex-элементы автоматически отобразятся в обратном порядке.

Модель Flexbox

Как мы уже говорили, у модуля flexbox есть широкий набор свойств. Некоторые из этих свойств необходимо применять к контейнеру (родительскому элементу, т. н. flex-контейнеру), а некоторые — к его дочерним элементам (т. н. flex-элементам). В этом уроке мы рассмотрим те свойства, которые предназначены для flex-контейнера.

Чтобы получить возможность пользоваться модулем flexbox, первым делом необходимо задать родительскому контейнеру свойство display: flex, вот так:

.container {
    display: flex;
}

Это свойство превратит обычный блок во flex-контейнер. После этого дочерние элементы контейнера автоматически преобразуются во flex-элементы. Кроме этого, можно задать значение inline-flex, которое сделает flex-контейнер инлайновым (строчным).

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

Чтобы стало понятнее, ниже мы покажем схематическую иллюстрацию с основной терминологией flexbox, а также объясним каждый термин отдельно:

Оси Flexbox

Итак, оси flexbox — это основное понятие данной модели.

Главная ось flex-контейнера — это направление, в котором располагаются его дочерние элементы. У главной оси есть начало и конец (они обозначены на схеме).

Поперечная ось flex-контейнера — это направление, перпендикулярное главной оси. У поперечной оси тоже есть начало и конец (отмечены на схеме).

Если вашей актуальной локалью является LTR (left-to-right), то направление главной оси пролегает слева направо. Направление поперечной оси пролегает сверху вниз.

В следующем уроке вы узнаете, какие существуют специальные CSS-свойства для flex-контейнера.