Корзина покупок пуста.
Вы можете выбрать товар из Каталога.
Вы можете выбрать товар из Каталога.
Бесплатная
Доставка
Доставка
Гарантия
Возврата
Возврата
Онлайн
Поддержка
Поддержка
363 рубля
Скрытый текст. Доступен только зарегистрированным пользователям.
?Мастер класс по FlexBox вёрстке Дмитрия Лаврика
Основные преимущества FlexBox:?
- полностью резиновая модель вёрстки
- адаптивный сайт без media-запросов
- удобные выравнивания элементов по горизонтали и вертикали
- изменение порядка HTML-элементов прямо из CSS
- с 2014 года поддержка всеми новыми браузерами
- простой и лаконичный CSS-код на выходе
Урок 1 — теория FlexBox
- Причины появления FlexBox
- Примеры неудобств в привычной вёрстке
- Поддержка браузерами
- Понимание flex-осей
- Резервирование места
- Управление сжатием
- Управление выравниванием
- Изменение направления контента
- Изменение порядка элементов
- Феерическая адаптивность
Урок 2 — вёрстка макета
1. Слышал, что у FlexBox есть проблемы с поддержкой различными браузерами, — это правда?
Лишь отчасти. Новейшие версии всех браузеров поддерживают FlexBox. Проблем быть не должно, потому что даже девятый 'осёл' автоматически обновляется до одиннадцатого. Но, разумеется, ни о какой поддержке <= IE8 речи быть не может. При этом я рекомендую не зацикливаться на старых браузерах, а изучать новые и удобные технологии.
2. Если FlexBox — это круто, почему dmitrylavrik.ru свёрстан обычным образом?
Эта вёрстка делалась ещё до того, как FlexBox стал адекватно поддерживаться всеми браузерами. Переделывать исключительно ради принципа? — Оставлю это бредовое занятие перфекционистам. В новых проектах FlexBox используется.
3. Будет ли домашнее задание?
Да, именно поэтому мастер-класс и разбит на две части. За неделю, которая будет между уроками, вы сможете поупражняться в вёрстке с помощью FlexBox.
Более понятней для чего это нужно
В данном видео мы разберём три примера с проблемами классической вёрстки и лёгким решением этих проблем с помощью flexbox:
- Разбор дз с первого урока
- Легко прижимаем подвал к низу
- Вертикальный поток обёрток
- Привычная 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.
Более понятней для чего это нужно
В данном видео мы разберём три примера с проблемами классической вёрстки и лёгким решением этих проблем с помощью flexbox:
- вертикальные выравнивания,
- динамическое изменение количества элементов,
- адаптивная вёрстка для обтекаемых элементов
Скрытый текст. Доступен только зарегистрированным пользователям.
