Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Верстка на автопилоте
Почему я не использую flexbox?
Почему я не использую flexbox?
Крупные клиенты
Корпоративный сектор
Относительно: малый процент Абсолютно: большое число
Ку...
Почему я не использую flexbox?
Капризные клиенты
Громкое слово «кроссбраузерность»
Устаревшее ТЗ
Какие задачи решают
с использованием flexbox?
Сеточные раскладки
Какие задачи решают
с использованием flexbox?
Вертикальное позиционирование
flex-direction: row
align-content
Какие задачи решают
с использованием flexbox?
Горизонтальное позиционирование
flex-direction: row
justify-content
Смена порядка блоков
Какие задачи решают
с использованием flexbox?
1 2 3 4 1 23 4
order
Чего НЕ МОЖЕТ flexbox?
Корректный перенос элементов 

в сеточной раскладке
Pinterest-раскладка
Чего НЕ МОЖЕТ flexbox?
Мне нельзя использовать flexbox!
Что делать?
Горизонтальная навигация
Мне нельзя использовать flexbox!
Что делать?
Горизонтальная навигация
Вертикальное центрирование (line-height)
Мне нельзя использовать flexbox!
Что делать?
Любой контент
Любые стили
div.parent
...
Мне нельзя использовать flexbox!
Что делать?
Вертикальное центрирование (:before)
Любой контент
Любые стили
div.parent
div....
Мне нельзя использовать flexbox!
Что делать?
Вертикальное центрирование (position: absolute)
Любой контент
Любые стили
div....
Мне нельзя использовать flexbox!
Что делать?
Вертикальное центрирование (table-cell)
Любой контент
Любые стили
div.parent
d...
Мне нельзя использовать flexbox!
Что делать?
Вертикальное центрирование (transform)
Любой контент
Любые стили
div.parent
di...
Сетки (inline-block)
Мне нельзя использовать flexbox!
Что делать?
Мне нельзя использовать flexbox!
Что делать?
Сетки (float)
Измененный порядок блоков
Мне нельзя использовать flexbox!
Что делать?
fluid width
?
Совсем без flexbox?
Нет
Адаптивная верстка
Совместно с поддержкой старых браузеров
Спасибо
Денис Ежков, ITECH.group
d.ezhkov@itech-group.ru
Skype: aka_skiff
LinkedIn: ezhkov
Upcoming SlideShare
Loading in …5
×

SECON'2016. Ежков Денис, Верстка на автопилоте. Почему я не использую flexbox

266 views

Published on

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

Published in: Software
  • Be the first to comment

SECON'2016. Ежков Денис, Верстка на автопилоте. Почему я не использую flexbox

  1. 1. Верстка на автопилоте Почему я не использую flexbox?
  2. 2. Почему я не использую flexbox? Крупные клиенты Корпоративный сектор Относительно: малый процент Абсолютно: большое число Куча старых компов
  3. 3. Почему я не использую flexbox? Капризные клиенты Громкое слово «кроссбраузерность» Устаревшее ТЗ
  4. 4. Какие задачи решают с использованием flexbox? Сеточные раскладки
  5. 5. Какие задачи решают с использованием flexbox? Вертикальное позиционирование flex-direction: row align-content
  6. 6. Какие задачи решают с использованием flexbox? Горизонтальное позиционирование flex-direction: row justify-content
  7. 7. Смена порядка блоков Какие задачи решают с использованием flexbox? 1 2 3 4 1 23 4 order
  8. 8. Чего НЕ МОЖЕТ flexbox? Корректный перенос элементов 
 в сеточной раскладке
  9. 9. Pinterest-раскладка Чего НЕ МОЖЕТ flexbox?
  10. 10. Мне нельзя использовать flexbox! Что делать? Горизонтальная навигация
  11. 11. Мне нельзя использовать flexbox! Что делать? Горизонтальная навигация
  12. 12. Вертикальное центрирование (line-height) Мне нельзя использовать flexbox! Что делать? Любой контент Любые стили div.parent div.child height line-height = height
  13. 13. Мне нельзя использовать flexbox! Что делать? Вертикальное центрирование (:before) Любой контент Любые стили div.parent div.child var height
  14. 14. Мне нельзя использовать flexbox! Что делать? Вертикальное центрирование (position: absolute) Любой контент Любые стили div.parent div.child height top: 50% Любой контент Любые стили div.parent div.child height margin-top: -height / 2
  15. 15. Мне нельзя использовать flexbox! Что делать? Вертикальное центрирование (table-cell) Любой контент Любые стили div.parent div.parent-table div.child
  16. 16. Мне нельзя использовать flexbox! Что делать? Вертикальное центрирование (transform) Любой контент Любые стили div.parent div.child var height top: 50% Любой контент Любые стили div.parent div.child var height transform: translateY(-50%)
  17. 17. Сетки (inline-block) Мне нельзя использовать flexbox! Что делать?
  18. 18. Мне нельзя использовать flexbox! Что делать? Сетки (float)
  19. 19. Измененный порядок блоков Мне нельзя использовать flexbox! Что делать? fluid width ?
  20. 20. Совсем без flexbox? Нет Адаптивная верстка Совместно с поддержкой старых браузеров
  21. 21. Спасибо Денис Ежков, ITECH.group d.ezhkov@itech-group.ru Skype: aka_skiff LinkedIn: ezhkov

×