Flexbox, теперь понятно

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

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

По материалам этого доклада и сопутствующих экспериментов готовится подробная статья, так что это видео не ставит точку в истории о понятном Flexbox.

Комментарии

30

Очень спасибо!

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

Олег, я искренне убеждён, что дизайнеру о веб-технологиях лучше не знать. С одной стороны, это конечно минус, что дизайнер не сможет сам воплотить прототип. С другой стороны, дизайнер в таком случае не будет ограничивать себя рамками «возможного», то есть не будет сразу же верстать в голове, рисуя.

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

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

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

Спасибо за доклад. Очень хорошо ввёл в тему.

Давно присматривался к теме, но с некоторой ленцой, т.к. терминология и вообще концепция другого порядка в сравнении с современным CSS.
Поэтому, Вадим, огромное спасибо за доклад. Я просто в восторге и от доходчивого рассказа и от технологии в целом.

Вадим, слушал тебя в живую впервые на codefest 2013. У тебя получаются очень доходчивые и атмосферные доклады! Надеюсь что Новосибирск тебе пришёлся по душе.

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

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

TecHMeaT, никаких специальных тестов быстродействия Флексбокса я не видел и не проводил, но думаю, что он подчиняется всем тем же правилам, что и любые другие двухмерные технологии: чем больше объектов меняется, тем дольше идёт отрисовка. Ничего слишком сложного или опасного я в технологии не вижу.

Спасибо за доклад. Использую флексбокс около года, чтобы не упутаться в синтаксисах использую набор миксинов для компасса https://gist.github.com/cimmanon/4461470 На сколько я понял это будет включено в следующий релиз компасса, сейчас он синтаксис 2009 поддерживает.

Класс, Вадим, спасибо!
На следующем проекте обязательно попробую flex-box.

Забавный момент: у меня на презентации сафари в iOS падает при открытии первого слайда с бендером и попытке прокрутить вниз :)

90 градусов же :) голову на 90 градусов поворачиваем (хоть это и невозможно). а так доклад очень классный.

в 22 ФФ запилили поддержку многострочности?

Во-первых, спасибо за прекрасную презентацию.
Во-вторых, нужно мнение скептика. Собираюсь делать небольшой grid-framework с использованием flexbox и откатом до float/inline-block. Нужен ли будет такой фреймворк сообществу? Какие подводные камни? Может знаете уже такую тулзу?

Я как-то попробовал наоборот, взять за основу имеющуюся сетку на инлайн-блоках (YUI Grid) и «прогрессивно улучшить» ее до флексбоксов, заодно избавившись от неприличных магических констант: http://jsfiddle.net/XeVFP/4/. Имеет ли такой подход право на жизнь?

Вадим, спасибо за презентацию.
Вопрос такой. Имеется ли сейчас какой-нибудь JS-скрипт добавляющий поддержку flexbox в те браузеры, которые его не поддерживают?
По примеру html5shiv.js — подключил и все.

P. S. Гуглил, но не нашел. Может не так искал.

Значит, на данный момент, заставить IE 8-9 понимать flexbox невозможно?
Или все таки есть какая-нибудь хитрость?

Уважаемый Вадим, не подскажите почему в опере версии 12.16 не верно зафиксирована ширина колонок и текст не переносится и зеленый блок не обрезается? Я уже всё перепробовал, но ничего не помогает. ссылка.

Вадим, здравствуйте. Привет вам из 2015. Изучаю react-native и там есть слабая поддержка flexbox, во свем разобрался, что пока есть, но вот вопрос большой. Как из макета psd/tif перенести во flexbox? Есть ли тулзы какие нибудь? как можно было бы проще соотношения элементов расставить как в макетах от дизайнеров?

Максим, боюсь я не слишком знаком с нюансами работы React Native и как именно Flexbox реализован там на уровне компонентов. Но я знаком с чистым Flexbox, CSS и вёрсткой. И мой опыт говорит: из готового плоского или послойного макета, который был нарисован в обычном редакторе, такие взаимодействия в код никак не перенести. Даже существующие «специальные» редакторы, вроде Macaw, такого не умеют. В этом и состоит умение верстать: вы смотрите на макет и видите как он устроен, потом открываете редактор и описываете его в коде. Пока только так.

Доброе, как думаете, Флексбоксы нужно/можно использовать в верстке тех же лендингов или нет?

GoodProject, не важно: лендинг это или не лендинг, Флексбокс универсален и если позволяют требования совместимости (IE10+), то можно смело его использовать для любой вёрстки.