Любой опытный верстальщик знает, как выровнять что-либо по вертикали или сделать макет с "резиновой" средней колонкой. Есть даже много способов, как это сделать. Однако все они довольно странные, похожи больше на какой-то лайфхак, используются далеко не всегда и не работают при несоблюдении определённых магических условий.
На мастер-классе мы поговорим о спецификации CSS Flexible Box Layout Module (в народе Flexbox). Она позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
Минутка истории
2008 – CSS Working Group обсуждает предложение “Flexible Box Model” на основе XUL (XML User Interface Language – язык разметки в приложениях Mozilla) and XAML (Extensible Application Markup Language – язык разметки в приложениях Microsoft).
2009 – опубликован черновик “Flexible Box Layout Module”. Chrome и Safari добавляет частичную поддержку, пока Mozilla начинает поддерживать XUL-подобный синтаксис, известный как “Flexbox 2009″.
2011 – Tab Atkins берётся за развитие Flexbox и публикует 2 черновика. В этих черновиках синтаксис изменён значительно. Chrome, Opera и IE 10 внедряют поддержку этого синтаксиса. Он известен под названием “Flexbox 2011”
2012 – Синтаксис снова немного изменён и уточнён. Спецификация переходит в статус Candidate Recommendation и известна под названием “Flexbox 2012”. Opera внедряет беспрефиксную поддержку, Chrome поддерживает текущую спецификацию с префиксами, а Mozilla без них, IE10 добавляет поддержку устаревающего “Flexbox 2011” синтаксиса.
2014 – все новые браузеры поддерживают последнюю спецификацию (включая IE 11)
Приглашаю всех начинающих верстальщиков и тех, кто знаком с основными правилами написания HTML/CSS кода. Вместе мы посмотрим на преимущества CSS Flexible Box Layout Module и узнаем, как всё это работает.
Пройти обучение