"flexbox — гибче мыслишь, больше спишь", Алексей...
Post on 14-Aug-2015
168 Views
Preview:
TRANSCRIPT
MoscowJS 24 Алексей Чернышев RG.RU @mrLozchka
30 июля 2015
Flexbox Гибче мыслишь – больше спишь
1/36
О чем будем говорить
• Что такое flexbox?
• Как он работает?
• Где использовать?
2/36
Зачем? div { width: 100px; height: 60px; margin-top: -30px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }
3 /36
Что такое flexbox? • Модуль CSS
• Новая система позиционирования
• Элементы выравниваются по осям
• Автоматически тянутся, сжимаются, выравниваются, меняются местами и т.п.
4 /36
Гибкий мир
5 /36
Создаем flex мир
<main> <div>1 Venus</div> <div>2 Earth</div> <div>3 Mars</div> <div>4 Jupiter</div>
</main>
HTML
main { display: flex; }
CSS
6 /36
Законы этого мира
7 /36
• flex-direction
• justify-content
• align-items
• flex-wrap
Основные свойства
• flex-grow
• flex-shrink
• flex-basis
Контейнер Элемент
8 /36
Оси можно вращать main { flex-direction: row; }
/* Варианты */
• row (по-умолчанию) • row-reverse • column • column-reverse
9 /36
Оси можно вращать
10 /36
Выравнивание по главной оси
main { justify-content: flex-start; }
/* Варианты */
• flex-start (по-умолчанию) • flex-end • center • space-between • space-around
11 /36
Выравнивание по главной оси
12 /36
Выравнивание по побочной оси
main { align-items: flex-start; }
/* Варианты */
• flex-start (по-умолчанию) • flex-end • center • baseline • stretch
13 /36
Выравнивание по побочной оси
14 /36
Многострочный поток
main { flex-wrap: nowrap; }
/* Варианты */
• nowrap (по-умолчанию) • wrap • wrap-reverse
15 /36
Многострочный поток
16 /36
Растягивание элементов main > div { flex-grow: 0; /* (по-умолчанию) */ }
17 /36
Сжатие элементов main > div { flex-shrink: 1; /* (по-умолчанию) */ }
18 /36
Базовый размер элемента
main > div { flex-basis: auto; /* (по-умолчанию) */ }
main > div:first-child { flex-basis: 300px; width: 100px; }
19 /36
Краткая запись
main > div { flex-grow: 0; flex-shrink: 1; flex-basis: auto; }
main > div { flex: 0 1 auto; }
=>
20 /36
Примеры
21 /36
Центрирование элемента по вертикали и горизонтали
44 года назад люди ходили по Луне, но я до сих пор не могу отцентровать элементы по вертикали в CSS
James Anderson
“
“
22 /36
Центрируем
<main> <div>Center me</div> </main>
HTML
main { height: 100%; }
CSS
Пример
23 /36
Решение с flexbox
main { display: flex; } main div { margin: auto; }
или
main { display: flex; justify-content: center; align-items: center; }
24 /36
Вертикальное выравнивание
25 /36
Решение
<main> <img src=“ico.png”> <p>Text text…</p> </main>
HTML
main { display: flex; align-items: center; } main img { flex-shrink: 0; }
CSS
26 /36
Прилипающий футер
27 /36
Решение <body> <header>Header</header> <main>Content…</main> <footer>Footer 2015</footer> </body>
HTML
body { display: flex; flex-direction: column; } header,main,footer { flex-shrink: 0; } main { flex-grow: 1; }
CSS
28 /36
Адаптивная разметка блоков
29 /36
Решение <body> <div>…</div> …(еще блоки) </body>
HTML
body { display: flex; flex-wrap: wrap; justify-content: space-around; } div { flex: 1 0 200px; } /* или */ div { flex-grow: 1; flex-shrink: 0; flex-basis: 200px; }
CSS
30 /36
Адаптивное меню
31 /36
Решение
<nav> <div>новости</div> <div>статьи</div> <div>контакты</div> </nav>
HTML
nav { display: flex; flex-wrap: wrap; justify-content: center; }
CSS
32 /36
Доступность
33 /36
Резюме Flexbox это:
• Адаптивные элементы из коробки
• Предсказуемость поведения
• Легкое выравнивание элементов
• Уменьшение количества кода
Резюме
34 /36
• Не нужна поддержка старых браузеров
• Готовность попробовать то, что лучше
Flexbox, когда:
35 /36
Будущее среди нас!
36 /36
Гибче мыслишь - больше спишь!
MoscowJS 24 Алексей Чернышев RG.RU @mrLozchka
Материалы
http://bit.ly/flexbox2015
top related