logo-textmainwebinarforumstudyingcoursestestsGBwebicons-08cartmessageslogoutloginlikegobacknoticearrow-downarrow-uparrow-leftarrow-rightarrow-right-biglike-smallblogsettingshelpviewscommentstagsmoremenuinstagramvkvkontaktefacebookgooglegoogle_oauth2g_plus-icn-01link_icn-01mailto_icn-01ok_icn-01#double-arrow-leftavatarprobationcog-smallcheckmore-iconcritical-noticecareercheckx-icnedit-icnemergency-helpicon-callbackicon-callback-hideicon-phonesmile-icnunsmile-icnlike-miniviews-minicomments-minigroup-minipricecalendargroup-ocertificateclassroomrecruitrecruit-hoverplaygithublinkedinbitbuckethometwitterprojecttrashmarkrecruitwriterefuserefreshmark-filledicon-pulsestarsearchproject-rocketyoutubetelegramsendmore-horizontalcalendar-2listbookslaptopcaseprice-badge-cornerpassword-hidepassword-showgive_me_my_moneymoney_sendquestion_smallquestionnairelocklesson-bellmenu_hmbrgrinfo-icnlinkpresentpdfdoneblankwinkspecial offertimerandroidmailrugmailgoogleyandexramblerbook-openbook-open-with-arrowcert-filledcert-emptyplay-2collapse-panelupload_arrowhomework-donereflected-eyearchivedownloadtimeronline-webinararrowvideounknown_asset_typeimagegwc-likegwc-viewgwc-commentgwc-playguruflag-ruflag-gbfire-in-the-holeon-airvery-likeicon-web-faculty-quartericon-android-faculty-quarterios-faculty-quarterjava-faculty-quartericon-gu-badgeicon-cursor-pointericon-quotesicon-exclamation-signplaceholderteacher-complaintpopup-close-buttonschedulebriefmentorintensiveopen-bookmousearrow-down-trianglescroll-featherfoldergroup

Особенности Flexbox-вёрстки

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

На мастер-классе мы поговорим о спецификации 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 и узнаем, как всё это работает.

Бесплатная запись на вебинар