Flexbox - зло или панацея? Можно ли обойтись без него? Почему верстку недооценивают?

1. Верстка на автопилоте
Почему я не использую flexbox?

2. Почему я не использую flexbox?
Крупные клиенты
Корпоративный сектор
Относительно: малый процент Абсолютно: большое число
Куча старых компов

3. Почему я не использую flexbox?
Капризные клиенты
Громкое слово «кроссбраузерность»
Устаревшее ТЗ

4. Какие задачи решают
с использованием flexbox?
Сеточные раскладки

5. Какие задачи решают
с использованием flexbox?
Вертикальное позиционирование
flex-direction: row
align-content

6. Какие задачи решают
с использованием flexbox?
Горизонтальное позиционирование
flex-direction: row
justify-content

7. Смена порядка блоков
Какие задачи решают
с использованием flexbox?
1 2 3 4 1 23 4
order

8. Чего НЕ МОЖЕТ flexbox?
Корректный перенос элементов
в сеточной раскладке

9. Pinterest-раскладка
Чего НЕ МОЖЕТ flexbox?

10. Мне нельзя использовать flexbox!
Что делать?
Горизонтальная навигация

11. Мне нельзя использовать flexbox!
Что делать?
Горизонтальная навигация

12. Вертикальное центрирование (line-height)
Мне нельзя использовать flexbox!
Что делать?
Любой контент
Любые стили
div.parent
div.child
height
line-height = height

13. Мне нельзя использовать flexbox!
Что делать?
Вертикальное центрирование (:before)
Любой контент
Любые стили
div.parent
div.child
var height

14. Мне нельзя использовать flexbox!
Что делать?
Вертикальное центрирование (position: absolute)
Любой контент
Любые стили
div.parent
div.child
height
top: 50%
Любой контент
Любые стили
div.parent
div.child
height
margin-top: -height / 2

15. Мне нельзя использовать flexbox!
Что делать?
Вертикальное центрирование (table-cell)
Любой контент
Любые стили
div.parent
div.parent-table
div.child

16. Мне нельзя использовать flexbox!
Что делать?
Вертикальное центрирование (transform)
Любой контент
Любые стили
div.parent
div.child
var height
top: 50%
Любой контент
Любые стили
div.parent
div.child
var height
transform: translateY(-50%)

17. Сетки (inline-block)
Мне нельзя использовать flexbox!
Что делать?

18. Мне нельзя использовать flexbox!
Что делать?
Сетки (float)

19. Измененный порядок блоков
Мне нельзя использовать flexbox!
Что делать?
fluid width
?

20. Совсем без flexbox?
Нет
Адаптивная верстка
Совместно с поддержкой старых браузеров

21. Спасибо
Денис Ежков, ITECH.group
d.ezhkov@itech-group.ru
Skype: aka_skiff
LinkedIn: ezhkov