Мастер класс по FlexBox вёрстке Дмитрия Лаврика
Основные преимущества FlexBox:
В данном видео мы разберём три примера с проблемами классической вёрстки и лёгким решением этих проблем с помощью flexbox:
Программа мастер-класса
04.08.2015
Урок 1 — теория FlexBox
Урок 2 — вёрстка макета
1. Слышал, что у FlexBox есть проблемы с поддержкой различными браузерами, — это правда?
Лишь отчасти. Новейшие версии всех браузеров поддерживают FlexBox. Проблем быть не должно, потому что даже девятый "осёл" автоматически обновляется до одиннадцатого. Но, разумеется, ни о какой поддержке <= IE8 речи быть не может. При этом я рекомендую не зацикливаться на старых браузерах, а изучать новые и удобные технологии.
2. Если FlexBox — это круто, почему dmitrylavrik.ru свёрстан обычным образом?
Эта вёрстка делалась ещё до того, как FlexBox стал адекватно поддерживаться всеми браузерами. Переделывать исключительно ради принципа? — Оставлю это бредовое занятие перфекционистам. В новых проектах FlexBox используется.
3. Будет ли домашнее задание?
Да, именно поэтому мастер-класс и разбит на две части. За неделю, которая будет между уроками, вы сможете поупражняться в вёрстке с помощью FlexBox.
Скачать:
Основные преимущества FlexBox:
- полностью резиновая модель вёрстки
- адаптивный сайт без media-запросов
- удобные выравнивания элементов по горизонтали и вертикали
- изменение порядка HTML-элементов прямо из CSS
- с 2014 года поддержка всеми новыми браузерами
- простой и лаконичный CSS-код на выходе
В данном видео мы разберём три примера с проблемами классической вёрстки и лёгким решением этих проблем с помощью flexbox:
- вертикальные выравнивания,
- динамическое изменение количества элементов,
- адаптивная вёрстка для обтекаемых элементов
Программа мастер-класса
04.08.2015
Урок 1 — теория FlexBox
- Причины появления FlexBox
- Примеры неудобств в привычной вёрстке
- Поддержка браузерами
- Понимание flex-осей
- Резервирование места
- Управление сжатием
- Управление выравниванием
- Изменение направления контента
- Изменение порядка элементов
- Феерическая адаптивность
Урок 2 — вёрстка макета
- Разбор дз с первого урока
- Легко прижимаем подвал к низу
- Вертикальный поток обёрток
- Привычная wrap-техника
- Анализ макета: margin vs display: flex
- flex: 1 1 auto; — чудеса адаптивной вёрстки
- Анализ динамического изменения количества элементов
- rem - телефоны скажут спасибо
- flex media-запросы
- Примеры, когда не стоит использовать flex
1. Слышал, что у FlexBox есть проблемы с поддержкой различными браузерами, — это правда?
Лишь отчасти. Новейшие версии всех браузеров поддерживают FlexBox. Проблем быть не должно, потому что даже девятый "осёл" автоматически обновляется до одиннадцатого. Но, разумеется, ни о какой поддержке <= IE8 речи быть не может. При этом я рекомендую не зацикливаться на старых браузерах, а изучать новые и удобные технологии.
2. Если FlexBox — это круто, почему dmitrylavrik.ru свёрстан обычным образом?
Эта вёрстка делалась ещё до того, как FlexBox стал адекватно поддерживаться всеми браузерами. Переделывать исключительно ради принципа? — Оставлю это бредовое занятие перфекционистам. В новых проектах FlexBox используется.
3. Будет ли домашнее задание?
Да, именно поэтому мастер-класс и разбит на две части. За неделю, которая будет между уроками, вы сможете поупражняться в вёрстке с помощью FlexBox.
Скачать:
Cкрытый контент, нужно авторизируйся или присоединяйся.
Возможно, Вас ещё заинтересует:
- [Алина Давлетова] Векторная иллюстрация и анимация (2025)
- [Woollyfern Creative] Коллекция 400+ стилей Midjourney (2025)
- [PurrfectCity] Промпты Midjourney для создания мультяшной векторной иллюстрации (2025)
- [Stepik] Атомарный дизайн в Figma. Методология проектирования интерфейсов
- [VeraV] Набор CU-654. Рамка под общее фото для детского сада (2025)
- [VideoSmile] Нейросети для дизайнера
- [Ольга Захарова] Ленивое атрибутирование
- [Художник Онлайн] От скетча до реализма в Procreate
- [Никита Юдаев] Изучаем дизайн с нуля в разных направлениях
- [VeraV] Набор CU-595. Новогодние коллажи
- [LiveClasses] Обзор возможностей DeepSeek
- [Art Kustova school] Архитектура. Вокзалы и мосты
- [fellowdesignersclub] Идеальный набор для профессионального дизайна
- [vasilinfo] Нишевые запросы. Еда
- [Botbrush] 100+ Midjourney Steampunk Prompts. Трендовые стимпанк промпты для Миджорни
- [Алиса Яковлева] Первый практический курс по нейросетям в дизайне. Тариф Самостоятельный
- [Domestika] Иллюстрация персонажей (Illustration of Characters with Style) (2024)
- [Ариадна Юсупова] Профессия инфографика
- [WebDesign Master] Веб-дизайн для начинающих
- [INT Lines] Семейства Тумбы и комоды (2024)