Flexbox - основы технологии и идеи удобной вёрстки по сетке 

Три года прошло, а пока это лучший материал по FlexBox

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

За два с половиной часа узнал все, что надо было о флексах:) Гениально!

Смотрел видео, на раслабоне. Мол и так все понятно. Начал верстать пробовать применить не клеится. Почитал несколько статей про тег и их свойства, пересмотрел кусочки видео еще раз и дошло. Спасибо Дмитрий за разъяснение тонкостей!

Ощущения не передаваемые!! Прошел курс по верстке,полностью окупил на 4 проекте))) в агентстве удивились, когда их задачу с блоками и адаптивом минут за 15 сверстал,говорят я не первый пытался!!! Теперь тихонько уже с галпом и нпм работаю. Плюсом за отзыв получил дополнительные и очень нужные бонусы-видео про GIT и про редактор нет бинз. И то.что все нововведения Димы, все его улучшения мы до сих пор имеем к группе доступ.

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

Ура!) Спасибо, Дмитрий! Самый классный преподаватель!

Мне хоть и редко фронт нужен, но смотреть такие видеоуроки одно удовольствие!

Дмитрий спасибо вам огромное. Мне и нужно то было, расставить три картинки в ряд. Затем, чтобы при уменьшении экрана они становились в колонку. Пересмотрел кучу уроков, но ваш самый подходящий. С меня лайк и подписка :-)

Подозреваю, что мне люто повезло найти вас, Дмитрий, ещё до того как начал изучать вёрстку! Т.е. я совсем нуб, однако видео посмотрел и мне всё понятно, Спасибо Вам! И, должен заметить, что у вас незаслуженно мало подписчиков(43к), ура такому контенту в ру-сегменте!

Спасибо большое !!! Просто шикарная лекция, все четко, доступно, понятно и без "воды" !!! Решительно рекомендую !!!

Крутой мэн ты Дима, подача материала, что поймут все! Однозначно подписка!

смотрю в записи, на вебинар никак не успеваю ))

Спасибо, Дмитрий! Если бы у меня в вузе были такие преподаватели, то судьба сложилась по-другому.

Спасибо большое за видео, очень понятно объясняете Дмитрий!

Отличный канал! Зашибись! Дмитрий - клевый парень и отличный препод!

Дмитрий, спасибо за вебинар!

Спасибо за материал. Очень полезно! И да, сколько уже можно мусолить этот Internet Explorer, в котором что-то там не поддерживается. Уже реально бесит. Корпоративные клиенты? Кто эти люди? Чем меньше поддерживать этот раритет тем скорее все это закончиться. Уже 20 лет я наблюдаю какие трудности в работе вызывает этот браузер, как для верстальщиков так и для дизайнеров. Постоянно надо было пихать костыли в этот долбаный Explorer. Для себя решил - все, хватит, забыл как кошмарный сон, что и вам рекомендую сделать. Сори, накипело ))

Это просто офигенно, сколько я е..ся с этими дивами.... к то б знал

Очень хороший учитель и позитивный чел . Репект.

Спасибо! Я совсем-совсем новичок в вестке. Но понятней чем у Дмитрия, подачи материала еще не встречала.

Теска красавчек, объясняешь просто шикарно.

Спасибо за курс! Все понятно и по полочкам)

это я вовремя нашёл) а то очень долго уже вливаюсь в адаптивку и всё никак. думал уже бутстрап ковырять с его огромными подключаемыми файлами, а тут нарвался на это. получается сразу можно изучать новую технологию, а не "прошлый век" с которого придётся переучиваться) спасибо вам. будем ковырять. благо галп и лесс пришлось выучить до этого, до этого момента ещё иногда сомневался в их профите, а теперь то нет))

Круто!Автору большой респект)

Большое спасибо, очень полезная информация.

Обязательно запишусь на курс.

Новый поток курса по крутой сетке: smartgrid.dmitrylavrik.ru/

Вот прикол.Посмотрел минут 20 и пошел верстать новый сайт с флексбоксами,возвращаюсь,уже все выучил)

Круто Дима!!! Круто!

Пришёл с видоса Вёрстка по сетке на flexbox + интерактивный тренажёр где говориться что сетка flexbox норм))

запилите видео про верстку под вордпресс или как посадить сайт на Wp со всеми подробностями

Удивительно широкий диапазон знаний. И JS и вёрстка на высоком уровне. Я думал это невозможно.

спасибо очень круто )

Спасибо большое!

Єто первое видео которое я досмотрел!

Эйфория от флексбоксов закончилась в тот момент, когда во флекс-элементе без заданной высоты overflow-y:scroll не работает и этот элемент растёт куда не надо :)

good job!

Спасибо, помог!!!

Spasiba Dmitry... Otlichnoe video... No u tvoevo uchenika tam na saita malenakaia oshibka... 'stretch' ne xvataet?.... :)

Вебинар живой, спасибо! Но вот тема не раскрыта. Хотелось посмотреть, как без генерации скриптами верстать на флексе плиточные элементы. Особенно интересно, как флексбокс поступает с последней строкой, в которую перенеслось меньше элементов, а мы хотим изменить там выравнивание.

Спасибо

А шож так годно? !

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

надо было background: url(мясо.jpg тогда было бы наглядней

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

спасибо

а подскажите почему не используете vw размеры? вроде сильно упрощают верстку. или нагрузка большая?

смотрю на скорости 1,5 - четко

можно ссылку на тренажер) flexbox

Отличное видео! Я только начал изучать и очень пригодится. Возникла проблема - На тайм коде 26:26 Только при работе на тренажере, у меня текст во втором блоке когда печатаю продолжает печататься дальше в строку и уходит под item3 а не переносится. Хотя выставляю все параметры как Дмитрий на видео. Всем item - flex-grow: 1 || flex-shrink: 1 || flex-basis: 300px У Parentbox - display: flex || text-align: inherit || flex-direction: row || flex-wrap: nowrap || justify-content: center || align-items: flex-start || align-content: stretch Не пойму, что я делаю не так и где ошибка? Или это глюк в тренажере? Один раз перенес строку, а потом опять в линию печатает.

неужели flex-grow работает именно так?

А как запомнить все значения флексов, про них есть документация?

еще пара таких видео и разработчики бутстрапа вывезут тебя в лес) К сожалению флексы имеют свои закидоны, но это определенно шаг вперед. Кстати, вот тебе хорошая тема на разбор -- Accelerated Mobile Pages

Вы преподаете где-то? В каком городе?

и я поставил лайк за флексбокс.

ахаха, спасибо, очень хорошо объяснил, примеры с едой всегда проходят)

Дмитрий скажите пожалуйста как делать offset? В остальном все понятно.

Дмитрий Лаврик, по Бутстрапу понятно) тоже его считаю плохо применимым для вёрстки ,а вот Zurb Foundation , по так сказать, его главному конкуренту что можете сказать?

Спасибо, Дмитрий! Замечательная технология. Позволяет значительно сократить время на написании медиа запросов. Но у меня возник вопрос, нельзя ли в миксины которые формируют медиа запросы вставлять другие свойства. Например: .items{ .row-flex(); .justify-content-md(center); .item{ .col(); .col-3(); .col-md-5(); .col-xs-10({ font-size: 0.8rem, img{ max-width: 100px } }); } } Чтобы при формировании запроса эти свойства автоматически добавлялись?

jeet поудобнее, чем smartgrid, хоть он и не на flex сделан

Ребят у меня вопрос, можно с помощью position relativ перемещать текст, применяется ли это свойство для текста?

povarenok.by/recepty А вот такую верстку можно сделать на флексбоксе? Что бы элементы в строке не выравнивались, а шли как в два столбца?

Мне кажется, что легче по старинке на медиа делать)))

Если smartgrid использует flex, то как быть тогда с поддержкой мамонтов? Что если нужно обеспечить поддержку IE 10, например? На caniuse пишется, что поддержка flex начинается с 11 версии, да и то частично

где вообще смотреть и записываться на вебинары ?

Ребят как сделать перенос строки с помощью флексов? Даже без флексов вообщк не пойму

Смотрел ваш прошлый вебинар про новую сетку, правда на курс не прошел потому что для меня там мало чего нового было бы. Но сетку сделал сразу как появилось свободное время) теперь полностью отказался от всех других сеток и использую только свою) друзьям тоже она понравилась. этот подход конечно очень классный оказался! Вот кстати сетка кому интересно github.com/gmdjs/gmdjs

А какие проблемы с display: inline-block; vertical-align:middle; ? Непонятные отступы? Родительскому элементу font-size: 0; и все)

как можно зафиксировать один из флекс блоков??

А почему нельзя для подобных целей использовать тег table? Зачем весь этот гемор?

простейший пример: yadi.sk/i/DNEDoRfN9kkSog как не бился но не смог флекбоксом вот так блоки расположить!

+

Благодарю, Дмитрий за урок. Может кому статья ниже полезна будет. Работа с Flexbox в гифках habr.com/ru/company/everydaytools/blog/321244/

++++

Ии и