- Тренажер с практикой
- Бессрочный доступ к теории
- Асинхронный формат обучения
Включено в курс
Чему вы научитесь
- Применять базовые свойства CSS Flexible Box Layout.
- Управлять HTML-элементами по вертикали и горизонтали с помощью Flex.
- Создавать адаптированные для мобильных устройств макеты.
- Создавать гибкие элементы, которые будут менять ширину и высоту.
Описание
С ростом количества веб-страниц и усложнением дизайна возникла острая проблема расположения элементов. Появление мобильных устройств показало, что текущих возможностей позиционирования недостаточно — у разработчиков возникла потребность в новом механизме, который позволит управлять элементами на экране. Таким механизмом стал CSS Flexible Box Layout. В этом курсе вы шаг за шагом изучите возможности механизма Flex и научитесь использовать его в проектах.
Уроки курса
-
3
Флекс-контейнер
Познакомиться с флекс-контейнерами и возможностями определения главной оси для рендера элементов -
4
Перенос элементов в контейнере
Узнать о способах переноса элементов внутри флекс-контейнера. Научиться пользоваться свойством flex-wrap -
5
Выравнивание элементов по главной оси
Узнать о способах выравнивания элементов по главной оси внутри флекс-контейнера. Познакомиться со свойством justify-content -
6
Выравнивание элементов по перпендикулярной оси
Узнать о способах выравнивания элементов по перпендикулярной оси внутри флекс-контейнера. Познакомиться со свойством align-items -
7
Свойства Flex-элементов. Гибкость. Flex-grow
Узнать о свойствах для работы с элементами внутри флекс-контейнеров. Изучить свойство Flex-grow -
8
Свойства Flex-элементов. Гибкость
Узнать о свойствах для работы с элементами внутри флекс-контейнеров. Изучить свойства flex-shrink, flex-basis, flex -
9
Свойства Flex-элементов. Расположение
Узнать о свойствах для работы с элементами внутри флекс-контейнеров. Изучить свойства order и align-self -
10
Дополнительные материалы
Помогают глубже и всесторонне рассмотреть тему курса в открытых статьях и видео подобранных командой Хекслета
Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки.
| # | Задание | % завершений |
|---|---|---|
| 1 | Плиточная галерея | 87% |
| 2 | Адаптивность на Flex | 74% |
| 3 | Гистограмма | 60% |
| 4 | Hero Section | 65% |
Впечатления
Просто взрыв мозга, насколько это проще, чем float :) Особенно, когда padding и magrin ещё у блоков есть :) Вот что значит не следить за технологиями и делать всё по-старинке :)
Теперь я на самом деле понимаю как много задач решает flex! Спасибо за курс! Жаль, что нельзя теорию из уроков добавить в избранное!
Сейчас немного изучаю верстку, делаю свой учебный проект. Должен сказать, что этот курс просто отлично помог. В интернете много всякого мусора на тему Flex. А тут все структурировано и по существую. Огромное спасибо ;)
Добрый вечер,
Спасибо за хороший курс, все объясняется доступным языком. Хоть у меня уже и был опыт работы с Flex ранее, но знания закрепились лишний раз. Не знаю, можно ли давать ссылки на сторонние ресурсы, но после такого курса отлично зайдет для закрепления материала следующая браузерная "игра": Flexbox Froggy
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
