Flexbox. Введение

Flexbox (флексбокс) - это новый модуль, который есть в CSS3, предназначенный для более эффективной верстки за счет гибкого расположения элементов, как по горизонтали, так и по вертикали. Данный модуль вышел на смену привычной верстки с помощью float.

Вся мощь flexbox поражает, потому что те элементы, которые раньше приходилось верстать используя различные хаки, теперь можно создавать очень просто.

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

Я не говорю, что прямо сейчас стоит полностью отказываться от использования float и перейти на flexbox. Для начала можно попробовать верстать какие-то отдельные элементы сайта на флексбоксах.

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

Урок 1 - Знакомство

Урок 2 - Управление осями

Урок 3 - Многострочная расстановка Flex-элементов

Разумеется мы с вами изучили не все свойства, которые применяются при работе с флексбоксами. Все что осталось, мы разберем уже в следующих видео.

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

  • Спасибо за качественный труд.

  • Здравствуйте, Александр! Мне случайно попались видеоуроки на Вашем канале yutube по Flexbox. Тема очень благодатная. Александр, Ваша подача материала проста в понимании и разъяснении материала. Хотелось бы более детально изучить все свойства flexbox и полностью уйти от свойств float В видео Вы говорите, что планируете сделать видео по верстке сайта используя flex. Но в 10 видеуроках "Верстаем Адаптивный Сайт" Вы не отошли от свойств float, а используете их совместно со свойствами flexbox. Ожидаем верстку сайта с помощью flexbox.

  • Спасибо за видеоуроки, только благодаря вашим урокам у меня пошел сдвиг по обучению) Очень хотелось бы урок по верстке макета с применением Flexbox.

  • Спасибо Вам большое, Александр.
    Восхищаюсь Вами ! Вы человек который сам всего добился!
    ( а это не легко!)
    А теперь еще и делитесь своими знаниями с другими. Доходчиво и понятно. Мне гораздо легче воспринимать материал с Вашими уроками.

  • Интересные уроки. Хотелось бы увидеть в Вашем исполнении хотя бы одну реализацию верстки на основе технологии flex контейнеров. Возникают много вопросов по ходу

  • 05.10.2016 01:15

    Александр, ответила Вам, но оно не появилось. Жаль. ну да ладно. Повторюсь вкратце. У меня тренировочный футер через флоат сделан. Попыталась переделать через флекс. И знаете, в принципе, получается. Суть, чего добиваюсь, чтобы при уменьшении экрана (до телефонного, например) мои текстовые столбцы футера (там в столбики разные текстовые блоки расположены — условия, информаци, юрвопросы, адрес…) выстраивались вертикально, один за одним. Они выстроились, только немного скачут лево-право. Возможно я смешные вещи говорю, — только учусь, пробую, поэтому для меня даже это уже успех, так что не обессудьте. Хотела пример привести, ссылку дать на тренировочную страницу, но не знаю, как оно принято, потому воздержалась.

  • 03.10.2016 22:28

    Вопрос по адаптивности (см.ниже) все еще актуален.

  • 03.10.2016 22:27

    Заработало, активировалось. Не знаю, в чем была проблема, сама собой исчезла.

  • 03.10.2016 22:13

    Это:
    display: flex; — нормально, активно
    а эти две:
    flex-direction: row;
    justify-content: flex-and;
    неактивны, на их изменения страница не реагирует.
    ——————
    Стоит Notepad++ v 6.7.5
    Браузер Firefox 43.0.1

    В чем может быть дело?

    И общий вопрос — а как это отражается на адаптивности дизайна? Влияет? Или только просто меняет способ верстки и к адаптивности не имеет отношения?

    • Vika, у вас не работало, потому что неправильно указано значение свойства justify-content: flex-and; Должно быть justify-content: flex-End;

      Что касается адаптивности то, флексы — это просто другой способ разметки, на принципы адаптивности данный факт не может влиять.

    • 05.10.2016 01:17

      Александр Пауков, может. Не во всех случаях, наверное, но где-то иногда упрощает верстку.

    • 05.10.2016 01:18

      …имеется ввиду, адаптивную верстку

  • 03.10.2016 18:57

    Александр, а вы не планируете сделать видео про анимацию элементов при скролле страницы? Что-то наподобие этого http://scrollmagic.io . Выглядит красиво и довольно часто начинает встречаться на сайтах

  • Александр, спасибо вам огромное) Всё понятно и доступно. Продолжение нужно однозначно, все видео пролайкал и подписался на канал!

  • Прекрасно! Отличное преподавание. Вот бы еще макетик сверстать для полного закрепления!?

  • Хорошее видео, рекомендую для просмотра.

  • Очень полезные видео. Хотелось бы продолжения…

  • 19.09.2016 12:15

    Очень полезно, на мой взгляд. Часто возникающие трудности из-за многогранности float диктуют поиск новых решений. Это и есть то самое решение. Хотелось бы посмотреть видео о вёрстке сайта с использованием flexbox. Спасибо, Александр. Очень доступно и интересно.