flexbox - верстка без float'ов by dmitry radyno
TRANSCRIPT
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
CROSS
AXIS
MAIN
AXIS
CROSS AXIS
FLEX-DIRECTION: COLUMN;
ВЫРАВНИВАНИЕ
ALIGN
-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-CONTENTFLEX-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;}
DEMORESPONSIVE 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/
