![Page 1: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/1.jpg)
MoscowJS 24 Алексей Чернышев RG.RU @mrLozchka
30 июля 2015
Flexbox Гибче мыслишь – больше спишь
![Page 2: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/2.jpg)
1/36
О чем будем говорить
• Что такое flexbox?
• Как он работает?
• Где использовать?
![Page 3: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/3.jpg)
2/36
Зачем? div { width: 100px; height: 60px; margin-top: -30px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }
![Page 4: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/4.jpg)
3 /36
Что такое flexbox? • Модуль CSS
• Новая система позиционирования
• Элементы выравниваются по осям
• Автоматически тянутся, сжимаются, выравниваются, меняются местами и т.п.
![Page 5: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/5.jpg)
4 /36
Гибкий мир
![Page 6: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/6.jpg)
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
![Page 7: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/7.jpg)
6 /36
Законы этого мира
![Page 8: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/8.jpg)
7 /36
• flex-direction
• justify-content
• align-items
• flex-wrap
Основные свойства
• flex-grow
• flex-shrink
• flex-basis
Контейнер Элемент
![Page 9: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/9.jpg)
8 /36
Оси можно вращать main { flex-direction: row; }
/* Варианты */
• row (по-умолчанию) • row-reverse • column • column-reverse
![Page 10: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/10.jpg)
9 /36
Оси можно вращать
![Page 11: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/11.jpg)
10 /36
Выравнивание по главной оси
main { justify-content: flex-start; }
/* Варианты */
• flex-start (по-умолчанию) • flex-end • center • space-between • space-around
![Page 12: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/12.jpg)
11 /36
Выравнивание по главной оси
![Page 13: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/13.jpg)
12 /36
Выравнивание по побочной оси
main { align-items: flex-start; }
/* Варианты */
• flex-start (по-умолчанию) • flex-end • center • baseline • stretch
![Page 14: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/14.jpg)
13 /36
Выравнивание по побочной оси
![Page 15: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/15.jpg)
14 /36
Многострочный поток
main { flex-wrap: nowrap; }
/* Варианты */
• nowrap (по-умолчанию) • wrap • wrap-reverse
![Page 16: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/16.jpg)
15 /36
Многострочный поток
![Page 17: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/17.jpg)
16 /36
Растягивание элементов main > div { flex-grow: 0; /* (по-умолчанию) */ }
![Page 18: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/18.jpg)
17 /36
Сжатие элементов main > div { flex-shrink: 1; /* (по-умолчанию) */ }
![Page 19: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/19.jpg)
18 /36
Базовый размер элемента
main > div { flex-basis: auto; /* (по-умолчанию) */ }
main > div:first-child { flex-basis: 300px; width: 100px; }
![Page 20: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/20.jpg)
19 /36
Краткая запись
main > div { flex-grow: 0; flex-shrink: 1; flex-basis: auto; }
main > div { flex: 0 1 auto; }
=>
![Page 21: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/21.jpg)
20 /36
Примеры
![Page 22: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/22.jpg)
21 /36
Центрирование элемента по вертикали и горизонтали
44 года назад люди ходили по Луне, но я до сих пор не могу отцентровать элементы по вертикали в CSS
James Anderson
“
“
![Page 23: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/23.jpg)
22 /36
Центрируем
<main> <div>Center me</div> </main>
HTML
main { height: 100%; }
CSS
Пример
![Page 24: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/24.jpg)
23 /36
Решение с flexbox
main { display: flex; } main div { margin: auto; }
или
main { display: flex; justify-content: center; align-items: center; }
![Page 25: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/25.jpg)
24 /36
Вертикальное выравнивание
![Page 26: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/26.jpg)
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
![Page 27: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/27.jpg)
26 /36
Прилипающий футер
![Page 28: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/28.jpg)
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
![Page 29: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/29.jpg)
28 /36
Адаптивная разметка блоков
![Page 30: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/30.jpg)
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
![Page 31: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/31.jpg)
30 /36
Адаптивное меню
![Page 32: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/32.jpg)
31 /36
Решение
<nav> <div>новости</div> <div>статьи</div> <div>контакты</div> </nav>
HTML
nav { display: flex; flex-wrap: wrap; justify-content: center; }
CSS
![Page 33: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/33.jpg)
32 /36
Доступность
![Page 34: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/34.jpg)
33 /36
Резюме Flexbox это:
• Адаптивные элементы из коробки
• Предсказуемость поведения
• Легкое выравнивание элементов
• Уменьшение количества кода
![Page 35: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/35.jpg)
Резюме
34 /36
• Не нужна поддержка старых браузеров
• Готовность попробовать то, что лучше
Flexbox, когда:
![Page 36: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/36.jpg)
35 /36
Будущее среди нас!
![Page 37: "Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24](https://reader033.vdocuments.mx/reader033/viewer/2022050907/55ccdbf0bb61ebf1518b45dc/html5/thumbnails/37.jpg)
36 /36
Гибче мыслишь - больше спишь!
MoscowJS 24 Алексей Чернышев RG.RU @mrLozchka
Материалы
http://bit.ly/flexbox2015