SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
Flexbox. Будущее верстки.
Прокопенко Олеся
prokopenko.o@i20.biz
● Табличная верстка
● Блочная верстка
● Flexbox
Немного истории
Flexbox – это…
Основы
Свойства
Свойства
Поддержка браузерами
Поддержка браузерами
Инструменты для создания шаблона
Инструменты для создания шаблона
Flexbox в Drupal
Спасибо за внимание ☺
Вопросы?

Contenu connexe

En vedette

"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter..."Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...MoscowJS
 
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки..."Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...MoscowJS
 
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25MoscowJS
 
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25MoscowJS
 
"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23
"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23
"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23MoscowJS
 
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29MoscowJS
 
«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав П...
«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав П...«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав П...
«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав П...MoscowJS
 
"Как написать компилятор за 15 минут", Андрей Гершун, MoscowJS 24
"Как написать компилятор за 15 минут", Андрей Гершун, MoscowJS 24"Как написать компилятор за 15 минут", Андрей Гершун, MoscowJS 24
"Как написать компилятор за 15 минут", Андрей Гершун, MoscowJS 24MoscowJS
 
How to stop debugging asynchronous code and start living, Andrey Salomatin, B...
How to stop debugging asynchronous code and start living, Andrey Salomatin, B...How to stop debugging asynchronous code and start living, Andrey Salomatin, B...
How to stop debugging asynchronous code and start living, Andrey Salomatin, B...MoscowJS
 
презентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ruпрезентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ruIvan Gromov
 
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28MoscowJS
 
Гибкие коробки на практике — Арсений Форштретер
Гибкие коробки на практике — Арсений ФорштретерГибкие коробки на практике — Арсений Форштретер
Гибкие коробки на практике — Арсений ФорштретерYandex
 
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24MoscowJS
 
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24MoscowJS
 
"Анимируем объекты с использованием физики в JavaScript", Елена Иванова, Mosc...
"Анимируем объекты с использованием физики в JavaScript", Елена Иванова, Mosc..."Анимируем объекты с использованием физики в JavaScript", Елена Иванова, Mosc...
"Анимируем объекты с использованием физики в JavaScript", Елена Иванова, Mosc...MoscowJS
 
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33MoscowJS
 
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31MoscowJS
 
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31MoscowJS
 
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29MoscowJS
 
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31MoscowJS
 

En vedette (20)

"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter..."Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
 
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки..."Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
"Подход к написанию безопасного клиентского кода на примере React", Иван Елки...
 
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
"HTML5 Cache Manifest на практике", Дмитрий Головин, MoscowJS 25
 
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
 
"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23
"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23
"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23
 
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
 
«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав П...
«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав П...«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав П...
«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав П...
 
"Как написать компилятор за 15 минут", Андрей Гершун, MoscowJS 24
"Как написать компилятор за 15 минут", Андрей Гершун, MoscowJS 24"Как написать компилятор за 15 минут", Андрей Гершун, MoscowJS 24
"Как написать компилятор за 15 минут", Андрей Гершун, MoscowJS 24
 
How to stop debugging asynchronous code and start living, Andrey Salomatin, B...
How to stop debugging asynchronous code and start living, Andrey Salomatin, B...How to stop debugging asynchronous code and start living, Andrey Salomatin, B...
How to stop debugging asynchronous code and start living, Andrey Salomatin, B...
 
презентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ruпрезентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ru
 
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
 
Гибкие коробки на практике — Арсений Форштретер
Гибкие коробки на практике — Арсений ФорштретерГибкие коробки на практике — Арсений Форштретер
Гибкие коробки на практике — Арсений Форштретер
 
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
 
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
"Flexbox — гибче мыслишь, больше спишь", Алексей Чернышев, MoscowJS 24
 
"Анимируем объекты с использованием физики в JavaScript", Елена Иванова, Mosc...
"Анимируем объекты с использованием физики в JavaScript", Елена Иванова, Mosc..."Анимируем объекты с использованием физики в JavaScript", Елена Иванова, Mosc...
"Анимируем объекты с использованием физики в JavaScript", Елена Иванова, Mosc...
 
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
 
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
 
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
 
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
 
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
 

Plus de DrupalSib

SSO авторизация - Татьяна Киселева, DrupalJedi
SSO авторизация - Татьяна Киселева, DrupalJediSSO авторизация - Татьяна Киселева, DrupalJedi
SSO авторизация - Татьяна Киселева, DrupalJediDrupalSib
 
XML в крупных размерах - Михаил Крайнюк, DrupalJedi
XML в крупных размерах - Михаил Крайнюк, DrupalJediXML в крупных размерах - Михаил Крайнюк, DrupalJedi
XML в крупных размерах - Михаил Крайнюк, DrupalJediDrupalSib
 
BigPipe: ускоряем загрузку страниц - Давид Пашаев, DrupalJedi
BigPipe: ускоряем загрузку страниц - Давид Пашаев, DrupalJediBigPipe: ускоряем загрузку страниц - Давид Пашаев, DrupalJedi
BigPipe: ускоряем загрузку страниц - Давид Пашаев, DrupalJediDrupalSib
 
Drupal в школе - Борис Шрайнер
Drupal в школе - Борис ШрайнерDrupal в школе - Борис Шрайнер
Drupal в школе - Борис ШрайнерDrupalSib
 
Евгений Юдкин - Коммуникационные инструменты в отделе продаж на примере интег...
Евгений Юдкин - Коммуникационные инструменты в отделе продаж на примере интег...Евгений Юдкин - Коммуникационные инструменты в отделе продаж на примере интег...
Евгений Юдкин - Коммуникационные инструменты в отделе продаж на примере интег...DrupalSib
 
D8 - Serialize, Normalize - Михаил Крайнюк, DrupalJedi
D8 - Serialize, Normalize - Михаил Крайнюк, DrupalJediD8 - Serialize, Normalize - Михаил Крайнюк, DrupalJedi
D8 - Serialize, Normalize - Михаил Крайнюк, DrupalJediDrupalSib
 
Drupal - создание инсталляционных профайлов - Иван Абраменко, CimpleO
Drupal - создание инсталляционных профайлов - Иван Абраменко, CimpleODrupal - создание инсталляционных профайлов - Иван Абраменко, CimpleO
Drupal - создание инсталляционных профайлов - Иван Абраменко, CimpleODrupalSib
 
Вадим Валуев - Искусство ИТ
Вадим Валуев - Искусство ИТВадим Валуев - Искусство ИТ
Вадим Валуев - Искусство ИТDrupalSib
 
Андрей Юртаев - Mastering Views
Андрей Юртаев - Mastering ViewsАндрей Юртаев - Mastering Views
Андрей Юртаев - Mastering ViewsDrupalSib
 
Migrate drupal 6 to drupal 8. Абраменко Иван
Migrate drupal 6 to drupal 8.  Абраменко ИванMigrate drupal 6 to drupal 8.  Абраменко Иван
Migrate drupal 6 to drupal 8. Абраменко ИванDrupalSib
 
Entity возрождение легенды. Исай Руслан
Entity возрождение легенды. Исай РусланEntity возрождение легенды. Исай Руслан
Entity возрождение легенды. Исай РусланDrupalSib
 
возводим динамическую таблицу, No views, no problem. Крайнюк Михаил
возводим динамическую таблицу, No views, no problem. Крайнюк Михаилвозводим динамическую таблицу, No views, no problem. Крайнюк Михаил
возводим динамическую таблицу, No views, no problem. Крайнюк МихаилDrupalSib
 
Реализация “гибких” списков Жамбалова Намжилма
Реализация “гибких” списков Жамбалова Намжилма Реализация “гибких” списков Жамбалова Намжилма
Реализация “гибких” списков Жамбалова Намжилма DrupalSib
 
Петр Селфин. Шок! Drupal 8 против SEO?! Без регистрации и SMS скачать бесплатно
Петр Селфин. Шок! Drupal 8 против SEO?! Без регистрации и SMS скачать бесплатноПетр Селфин. Шок! Drupal 8 против SEO?! Без регистрации и SMS скачать бесплатно
Петр Селфин. Шок! Drupal 8 против SEO?! Без регистрации и SMS скачать бесплатноDrupalSib
 
Сергей Синица. Разработка интернет-магазинов на Drupal
Сергей Синица. Разработка интернет-магазинов на DrupalСергей Синица. Разработка интернет-магазинов на Drupal
Сергей Синица. Разработка интернет-магазинов на DrupalDrupalSib
 
Eugene Ilyin. Why Drupal is cool?
Eugene Ilyin. Why Drupal is cool?Eugene Ilyin. Why Drupal is cool?
Eugene Ilyin. Why Drupal is cool?DrupalSib
 
Ivan Kotlyar. PostgreSQL in web applications
Ivan Kotlyar. PostgreSQL in web applicationsIvan Kotlyar. PostgreSQL in web applications
Ivan Kotlyar. PostgreSQL in web applicationsDrupalSib
 
Sergey Cherebedov. Deployment of the environment for Drupal using Ansible.
Sergey Cherebedov. Deployment of the environment for Drupal using Ansible.Sergey Cherebedov. Deployment of the environment for Drupal using Ansible.
Sergey Cherebedov. Deployment of the environment for Drupal using Ansible.DrupalSib
 
Anton Shloma. Drupal as an integration platform
Anton Shloma. Drupal as an integration platformAnton Shloma. Drupal as an integration platform
Anton Shloma. Drupal as an integration platformDrupalSib
 
Руслан Исай - Проповедуем Drupal разработку
Руслан Исай - Проповедуем Drupal разработку Руслан Исай - Проповедуем Drupal разработку
Руслан Исай - Проповедуем Drupal разработку DrupalSib
 

Plus de DrupalSib (20)

SSO авторизация - Татьяна Киселева, DrupalJedi
SSO авторизация - Татьяна Киселева, DrupalJediSSO авторизация - Татьяна Киселева, DrupalJedi
SSO авторизация - Татьяна Киселева, DrupalJedi
 
XML в крупных размерах - Михаил Крайнюк, DrupalJedi
XML в крупных размерах - Михаил Крайнюк, DrupalJediXML в крупных размерах - Михаил Крайнюк, DrupalJedi
XML в крупных размерах - Михаил Крайнюк, DrupalJedi
 
BigPipe: ускоряем загрузку страниц - Давид Пашаев, DrupalJedi
BigPipe: ускоряем загрузку страниц - Давид Пашаев, DrupalJediBigPipe: ускоряем загрузку страниц - Давид Пашаев, DrupalJedi
BigPipe: ускоряем загрузку страниц - Давид Пашаев, DrupalJedi
 
Drupal в школе - Борис Шрайнер
Drupal в школе - Борис ШрайнерDrupal в школе - Борис Шрайнер
Drupal в школе - Борис Шрайнер
 
Евгений Юдкин - Коммуникационные инструменты в отделе продаж на примере интег...
Евгений Юдкин - Коммуникационные инструменты в отделе продаж на примере интег...Евгений Юдкин - Коммуникационные инструменты в отделе продаж на примере интег...
Евгений Юдкин - Коммуникационные инструменты в отделе продаж на примере интег...
 
D8 - Serialize, Normalize - Михаил Крайнюк, DrupalJedi
D8 - Serialize, Normalize - Михаил Крайнюк, DrupalJediD8 - Serialize, Normalize - Михаил Крайнюк, DrupalJedi
D8 - Serialize, Normalize - Михаил Крайнюк, DrupalJedi
 
Drupal - создание инсталляционных профайлов - Иван Абраменко, CimpleO
Drupal - создание инсталляционных профайлов - Иван Абраменко, CimpleODrupal - создание инсталляционных профайлов - Иван Абраменко, CimpleO
Drupal - создание инсталляционных профайлов - Иван Абраменко, CimpleO
 
Вадим Валуев - Искусство ИТ
Вадим Валуев - Искусство ИТВадим Валуев - Искусство ИТ
Вадим Валуев - Искусство ИТ
 
Андрей Юртаев - Mastering Views
Андрей Юртаев - Mastering ViewsАндрей Юртаев - Mastering Views
Андрей Юртаев - Mastering Views
 
Migrate drupal 6 to drupal 8. Абраменко Иван
Migrate drupal 6 to drupal 8.  Абраменко ИванMigrate drupal 6 to drupal 8.  Абраменко Иван
Migrate drupal 6 to drupal 8. Абраменко Иван
 
Entity возрождение легенды. Исай Руслан
Entity возрождение легенды. Исай РусланEntity возрождение легенды. Исай Руслан
Entity возрождение легенды. Исай Руслан
 
возводим динамическую таблицу, No views, no problem. Крайнюк Михаил
возводим динамическую таблицу, No views, no problem. Крайнюк Михаилвозводим динамическую таблицу, No views, no problem. Крайнюк Михаил
возводим динамическую таблицу, No views, no problem. Крайнюк Михаил
 
Реализация “гибких” списков Жамбалова Намжилма
Реализация “гибких” списков Жамбалова Намжилма Реализация “гибких” списков Жамбалова Намжилма
Реализация “гибких” списков Жамбалова Намжилма
 
Петр Селфин. Шок! Drupal 8 против SEO?! Без регистрации и SMS скачать бесплатно
Петр Селфин. Шок! Drupal 8 против SEO?! Без регистрации и SMS скачать бесплатноПетр Селфин. Шок! Drupal 8 против SEO?! Без регистрации и SMS скачать бесплатно
Петр Селфин. Шок! Drupal 8 против SEO?! Без регистрации и SMS скачать бесплатно
 
Сергей Синица. Разработка интернет-магазинов на Drupal
Сергей Синица. Разработка интернет-магазинов на DrupalСергей Синица. Разработка интернет-магазинов на Drupal
Сергей Синица. Разработка интернет-магазинов на Drupal
 
Eugene Ilyin. Why Drupal is cool?
Eugene Ilyin. Why Drupal is cool?Eugene Ilyin. Why Drupal is cool?
Eugene Ilyin. Why Drupal is cool?
 
Ivan Kotlyar. PostgreSQL in web applications
Ivan Kotlyar. PostgreSQL in web applicationsIvan Kotlyar. PostgreSQL in web applications
Ivan Kotlyar. PostgreSQL in web applications
 
Sergey Cherebedov. Deployment of the environment for Drupal using Ansible.
Sergey Cherebedov. Deployment of the environment for Drupal using Ansible.Sergey Cherebedov. Deployment of the environment for Drupal using Ansible.
Sergey Cherebedov. Deployment of the environment for Drupal using Ansible.
 
Anton Shloma. Drupal as an integration platform
Anton Shloma. Drupal as an integration platformAnton Shloma. Drupal as an integration platform
Anton Shloma. Drupal as an integration platform
 
Руслан Исай - Проповедуем Drupal разработку
Руслан Исай - Проповедуем Drupal разработку Руслан Исай - Проповедуем Drupal разработку
Руслан Исай - Проповедуем Drupal разработку