Flexbox. Введение

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

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

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

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

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

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

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

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

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (17)

Наталия 7 марта в 11:22

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

Ответить

Наталия 11 января в 11:48

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

Ответить

Эдуард 10 октября 2016 г. в 15:13

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

Ответить

Vika 5 октября 2016 г. в 01:15

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

Ответить

Vika 3 октября 2016 г. в 22:28

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

Ответить

Vika 3 октября 2016 г. в 22:27

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

Ответить

Vika 3 октября 2016 г. в 22:13

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

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

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

Ответить

Александр Пауков 4 октября 2016 г. в 07:25

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

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

Ответить

Vika 5 октября 2016 г. в 01:17

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

Ответить

Vika 5 октября 2016 г. в 01:18

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

Ответить

Юлия 3 октября 2016 г. в 18:57

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

Ответить

Александр Пауков 4 октября 2016 г. в 07:34

Юлия, спасибо за идею. Да, тема действительно актуальная, я постараюсь записать видео по ней.

Ответить

Евгений 30 сентября 2016 г. в 21:08

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

Ответить

Владимир 21 сентября 2016 г. в 18:51

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

Ответить

Виктор 20 сентября 2016 г. в 15:54

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

Ответить

Александр 20 сентября 2016 г. в 05:17

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

Ответить

Олег 19 сентября 2016 г. в 12:15

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

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад