#1 — Flexbox CSS3 на практике

Недостаточно только желать; надо делать. Гёте Иоганн Вольфганг

Рады видеть вас на нашем видеокурсе, посвященном одной из современных и актуальных на сегодняшний день технологий — технологии верстки на Flexbox CSS3. На сегодняшнем видеоуроке вы познакомитесь с терминологией Flexbox, узнаете о некоторых CSS-свойствах, которые не работают при применении этой технологии.

Терминология Flexbox CSS3

Само название Flexbox произошло от двух слов — flexible box (гибкие блоки).

Начать верстать по технологии flexbox CSS3 на самом деле совсем не сложно. Для начала нужно выбрать блок, элементы которого будут верстаться на flexbox, и задать этому блоку следующее свойство

Как только мы пропишем это свойство, все элементы, находящиеся внутри данного блока, будут подчинены законам Flexbox CSS3. Сам этот блок будет называться flex-контейнером, а все элементы внутри него — flex-блоками или flex-элементами.

Особенности некоторых свойств при верстке на Flexbox CSS3

Если у блока прописано свойство display: flex; то такие свойства, как float, columns и vertical-align работать в этом блоке не будут.

На сайте caniuse.com можно посмотреть таблицу совместимости любого CSS-свойства со всеми браузерами, в том числе мы можем узнать и о кроссбраузерности свойства flex.

На видеоуроке будет также затронута тема внешних отступов — margin. Если при обычной верстке CSS-свойство margin у соседних элементов взаимосочетается, то при верстке на Flexbox CSS3 эти свойства соседних блоков складываются.

Таково краткое содержание первого видеоурока курса. Смотрите и да пребудет с вами Бог Фронтенда!

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Ссылки из урока:
1. Ссылка на архив FlexBox: http://goo.gl/xIBfLI
2. Ссылка на видеокурс по Brackets (2.20): https://www.youtube.com/playlist?list=PLPpaecEYRC8bGw3oj3ecnPjSe09r4bPyo
Автор видеокурса – Сергей Михалевич.