flexbox - верстка без float'ов by dmitry radyno

FLEXBOXВЕРСТКА БЕЗ

FLOAT’ОВ

ДМИТРИЙ РАДЫНО

СУРОВАЯ РЕАЛЬНОСТЬ:

•ТАБЛИЧНАЯ ВЕРСТКА

•БЛОЧНАЯ ВЕРСТКА

ВЕРСТКА ТАБЛИЦАМИ+ ПРОСТАЯ ДЛЯ ПОНИМАНИЯ

+ ТАБЛИЦА ХОРОШО МАСШТАБИРУЕТСЯ

- СЕМАНТИЧЕСКИ НЕВЕРНАЯ

- ГРОМОЗДКИЙ КОД

-ОТРИСОВКА ПОСЛЕ ПОЛНОЙ ЗАГРУЗКИ

ВЕРСТКА БЛОКАМИ+ СЕМАНТИЧЕСКИ ВЕРНАЯ

+ ПОНЯТНЫЙ HTML КОД

+ ОТРИСОВКА ПО МЕРЕ ЗАГРУЗКИ

- ТРУДНЕЕ В ПОНИМАНИИ

- FLOAT – ОБТЕКАНИЕ ЭЛЕМЕНТА

FLOAT: LEFT; FLOAT: RIGHT;

FLEXBOX - ЗАКОНОМЕРНОСТЬ!2008 - ОБСУЖДЕНИЕ ПРЕДЛОЖЕНИЯ “FLEXIBLE BOX MODEL”

2009 - ОПУБЛИКОВАН ЧЕРНОВИК (FLEXBOX 2009)

2011 – ОБНОВЛЕН СИНТАКСИС (FLEXBOX 2011)

2013 ГОД - СПЕЦИФИКАЦИЯ ПЕРЕХОДИТ В СТАТУС CANDIDATE RECOMMENDATION И ИЗВЕСТНА ПОД НАЗВАНИЕМ “FLEXBOX 2012”

FLEXBOX – TURN ON!

.container { display: flex;}

<div class="container"> <div class="item">...</div> <div class="item">...</div></div>

FLEX DIRECTIONS

.container { flex-direction: row; /* row-reverse | column | column-reverse */}

ОСИ И НАПРАВЛЕНИЯ

FLEX-DIRECTION: ROW;

MAIN AXIS

CR

OSS

A

XIS

MA

IN

AX

IS

CROSS AXIS

FLEX-DIRECTION: COLUMN;

ВЫРАВНИВАНИЕ

ALIG

N-

ITEM

S

JUSTIFY-CONTENT

JUSTIFY-CONTENTFLEX-STARTFLEX-ENDCENTERSPACE-AROUNDSPACE-BETWEEN

ALIGN-ITEMS

FLEX-START

FLEX-END

CENTER

STRETCH

BASELINE

ALIGN: CENTER

.container { display: flex; justify-content: center; align-items: center;}

<div class="container"> <div class="item"> I'm align center<br> It's not a miracle! </div></div>

FLEXIBLE SIZING

FLEXIBLE SIZING

.item { flex-basis: 200px; flex-grow: 1; flex-shrink: 1;}

FLEX-BASIS – БАЗОВЫЙ РАЗМЕР

FLEX: <FLEX-GROW> <FLEX-SHRINK> <FLEX-BASIS>;

FLEX-GROW – ФАКТОР РАСШИРЯЕМОСТИ

FLEX-SHRINK – ФАКТОР СЖИМАЕМОСТИ

.item { flex: 1 1 200px;}

FLEXIBLE SIZING: GROW

<div class="container"> <div class="item small">I'm 200px by default</div> <div class="item big">I'm 400px by default</div> <div class="item small">I'm 200px by default</div></div>

.container { display: flex; width: 1000px;}.item.small { flex: 1 1 200px;}.item.big { flex: 1 1 400px;}

1000 PX

200 + 67 PX

200 + 67 PX

400 + 66 PX

FLEXIBLE SIZING: GROW

<div class="container"> <div class="item small">I'm 200px by default</div> <div class="item big">I'm 400px by default</div> <div class="item small">I'm 200px by default</div></div>

.container { display: flex; width: 1000px;}.item.small { flex: 1 1 200px;}.item.big { flex: 3 1 400px;}

1000 PX

200 + 40 PX

200 + 40 PX

400 + 120 PX

FLEXIBLE SIZING: SHRINK

<div class="container"> <div class="item small">I'm 200px by default</div> <div class="item big">I'm 400px by default</div> <div class="item small">I'm 200px by default</div></div>

.container { display: flex; width: 700px;}.item.small { flex: 1 1 200px;}.item.big { flex: 1 1 400px;}

700 PX

200 - 25 PX

200 - 25 PX

400 - 50 PX

DESKTOP

TABLET

MOBILE

СТРУКТУРА СТРАНИЦЫ

МНОГОСТРОЧНОСТЬ: FLEX-WRAP

FLEX-WRAP: NOWRAP

FLEX-WRAP: WRAP

FLEX-WRAP: WRAP-REVERSE

FLEX-FLOW

.container { flex-direction: row; flex-wrap: wrap;}

FLEX-FLOW: <FLEX-DIRECTION> <FLEX-WRAP>;

. container { flex-flow: row wrap;}

.container { flex-direction: column; flex-wrap: nowrap;}

. container { flex-flow: column nowrap;}

ALIGN-CONTENT

FLEX-START

SPACE-BETWEEN

FLEX-END

CENTER

FLEX-AROUND

STRETCH (DEFAULT)

ORDERING

ORDERINGNON-VISUAL MEDIA

ORDERING

<div class="container"> <div class="item first">I'm the first</div> <div class="item second">I'm the second</div> <div class="item third">I'm the third</div></div>

.item.first { order: 2;}.item.second { order: 3;}.item.third { order: 1;}

FLEXBOX.container { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: stretch;}.item { flex: 1 1 auto; order: 2;}

DEMO

RESPONSIVE ADAPTIVE LAYOUT БЕЗ СМС И РЕГИСТРАЦИИ! СКАЧАТЬ БЕСПЛАТНО! HTTP://CODEPEN.IO/RADYNO/PEN/FRXTA

FLEXBOX + CSS ANIMATION HTTP://CODEPEN.IO/RADYNO/PEN/AWGLP

BROWSER SUPPORT

CROSS-BROWSER LAYOUT.container { display: -webkit-flexbox; display: -ms-flexbox; display: flex;

-webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap;

justify-content: flex-end; -ms-flex-pack: end; flex-pack: end;

-ms-flex-line-pack: distribute; flex-line-pack: distribute; align-content: space-around;}

.item { -webkit-flex: 1 1 100px; -ms-flex: 1 1 100px; flex: 1 1 100px;

-ms-flex-order: -1; flex-order: -1; order: -1;

}

AUTOPREFIXER

POLYFILLS

ЗДЕСЬ МОГ БЫ БЫТЬ ВАШ ПОЛИФИЛ!МЕСТО ДЛЯ ВАШЕГО ПОЛИФИЛА!ТЕЛ +37533 ХХХ-ХХ-ХХ

GENERATORS

GENERATORS

GENERATORS

GENERATORS

PERFORMANCE

PERFORMANCEDESKTOP

MOBILE

ВЫВОДЫ

• УДОБНО• СТАНОВИТСЯ ПОПУЛЯРНЫМ• АДАПТИВНЫЙ ДИЗАЙН• АНИМИРУЕТСЯ• ALIGN-CONTENT / ALIGN-ITEMS• БАГИ ПРИСУТСТВУЮТ

ПОЛЕЗНЫЕ ССЫЛКИСТАТЬИ ПО FLEXBOXHTTP://HTML5.BY/BLOG/FLEXBOX/HTTP://CSS-TRICKS.COM/SNIPPETS/CSS/A-GUIDE-TO-FLEXBOX/

КРОССБРАУЗЕРНОЕ ИСПОЛЬЗОВАНИЕ FLEXBOXHTTP://CSS-TRICKS.COM/USING-FLEXBOX/HTTP://CANIUSE.COM/#FEAT=FLEXBOXHTTPS://GITHUB.COM/POSTCSS/AUTOPREFIXER

СПЕЦИФИКАЦИЯ FLEXBOX 2012HTTP://WWW.W3.ORG/TR/CSS3-FLEXBOX/

ВОПРОСЫ?

ДМИТРИЙ РАДЫНО: TWITTER: @RADYNO FACEBOOK: DMITRY.RADYNO EMAIL: DMITRY.RADYNO@GMAIL.COM