Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Зачем нам нужен Flexbox

Давайте углубимся в подробности использования модуля CSS Flexible Box Layouts, более известного как Flexbox.

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

Линейные блоки и свободное пространство

Самой большой проблемой использования линейных блоков (inline-block) является механизм разметки, выводящий пробелы между элементами HTML. Это не считается серьезном недостатком (хотя многие разработчики были бы не прочь узнать способ удаления пробела), но означает, что для удаления нежелательного пробела нужно прибегать к особым приемам, что, на мой взгляд, отнимает около 95 % времени. Существует множество способов решения этой проблемы, в предыдущем примере мы воспользовались обнулением размера шрифта — 'font-size zero', у которого есть собственные недостатки и ограничения. Но вместо перечисления всех возможных способов устранения свободных пространств при использовании линейных блоков я предлагаю ознакомиться со статьей неугомонного Криса Койера (Chris Coyier): http://css-tricks.com/fighting-the-space-between-inline-block-elements/.

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

Плавающие элементы (floats)

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

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

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

Table и table-cell

Не нужно путать display: table и display: table-cell с соответствующими элементами HTML. Эти CSS-свойства просто имитируют разметку своих собратьев из HTML и на структуру HTML не влияют.

Я считаю табличную CSS-разметку исключительно полезной. Как минимум она позволяет осуществлять единообразное и надежное выравнивание элементов по центру друг в друге. Кроме того, элементы, имеющие настройку отображения display: table-cell внутри элемента, имеющего настройку display: table, отлично справляются с расстановкой пустых пространств и не страдают от проблем округления, как плавающие элементы. А поддержка этих свойств уходит корнями аж к Internet Explorer 7!

Но и здесь не обошлось без ограничений. Зачастую возникает необходимость заключать элемент в дополнительную оболочку (чтобы получить четкое выравнивание по центру, ячейка таблицы (table-cell) должна находиться внутри элемента, настроенного как таблица (table)). Кроме того, элементы, имеющие настройку отображения display: table-cell, не могут переносить свое содержимое с одной строки на другую.

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

Представляем Flexbox

Модуль Flexbox предназначен для устранения недостатков, имеющихся в каждом из упомянутых ранее механизмов отображения. Коротко перечислю его исключительные возможности.

• Он легко справляется с выравниванием содержимого по вертикали.

• Он может изменить порядок визуального отображения элементов.

• Он может автоматически заполнять пространство пробелами и выравнивать элементы внутри блока, автоматически распределяя между ними доступное пустое пространство.

• Он может заставить вас выглядеть на десять лет моложе (наверное, все же не может, но, в чем я смог лично убедиться, уменьшая количество проб и ошибок, он снижает у вас уровень стресса).