Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Средний
6 уроков
(1 час 20 минут)
Курс
Flexbox CSS3
На этом видеокурсе вы узнаете о верстке сайтов по технологии Flexbox.

#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
Автор видеокурса – Сергей Михалевич.

Материалы к уроку:
Делись:

Оставь комментарий!

6 thoughts on “#1 — Flexbox CSS3 на практике

  1. Дмитрий:

    Спасибо, полезное вводное видео.

  2. t0toro:

    Я конечно дико извиняюсь, но вы ужасно картавите.

    Вы не уточнили что chrome(win) != chrome(linux). Хотя подозреваю что вы этого не знаете.

    1. Anatolii Kochurkov:

      Сделайте лучше! =)))

      1. t0toro:

        Критик — это человек, который знает дорогу, но не может водить машину.

  3. youdev:

    не используйте .rar архивы используйте .zip.
    .rar — неудобно.
    (ссылка на архив FlexBox — ведет на .rar)

  4. douson:

    Странно слышать критику от людей в отношении особенностей человека. Я пришел сюда за информацией, а не придираться. Уважайте труд автора. Все круто!!!!

Добавить комментарий

Рекомендуемые курсы