[loftblog] - Flexbox CSS3
Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
Критерий завершения
Материал изучен
-
Знакомство с FlexBox
Сегодня начинаем знакомиться с FlexBox. Мы узнаем, про его терминологию, кроссбраузерность, какие свойства CSS в нем не работают, и маленькие нюансы по обработке внешних отступов (margin).
-
Свойства FlexBox
Оси – это главное во FlexBox, потому как именно с их помощью вы сможете “рулить” размещением flex-элементов. И если вы поймете, как ими управлять – пол дела уже сделано! Этим сегодня мы и займемся ;)
-
Свойства FlexBox - 2
Если вы попробуете разместить новые flex-элементы на новый ряд – flexbox “скрутит вам большую фигу” и все равно разместит их в одну линию. Даже если вы пропишите своим блокам большую ширину или высоту. В этом уроке вы научитесь задавать ряды, выравнивать их и управлять ими. Налетай!
-
Управляем размерами блоков
Сегодня мы научимся тонко управлять размерами блоков. Узнаем про их главную величину, которая зависит от направления главной оси.
-
Управление выводом
В пятом видео мы научимся управлять местоположением и выводом flex-элементов. Это занятие очень легкое и очень интересное! Представьте, вы можете менять вывод блоков сайта как вашей душе угодно только в CSS, без правки HTML, PHP или какого-либо другого кода.
-
Flexbox на практике
Сегодня попробуем немножко применять flexbox на практике, на примере создания простого сайта. В описании к видео я также скинул вам ссылку на текстовый файл с актуальными префиксами для свойств flex.
- 1430
- 31 июля 2015, 06:44
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением