В чем разница Flexbox и CSS Grid. Что использовать CSS Grid layout или Flexbox.
HTML-код
- Опубликовано: 2 июл 2017
- Всем привет, в этом видео мы опять поговорим на тему Css grid и flexbox. И обсудим мы в чем их разница и что лучше и в каких случаях использовать.
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
спасибо за теорию без практики, чертов гений
Люди если вы его не понимаете ,знайте что он действительно нихера не понятно объясняет
В целом ок, но без примеров сложно представить
То что я искала! Спасибо , буду смотреть и другие видио
Добрый день! Благодарю за краткое и понятное объяснение!
Подскажите, в случае, когда мне нужно расположить элементы, чтобы на компе они были друг на против друга (фото слева, текст права от фото), а на мобильниках, чтобы текст уходил под фото, что лучше здесь использовать? flex или grid?
Заранее благодарю!
Очень нужное видео, спасибо
Это хорошо
03:46 подписывайтесь на какнал , если еще не подписаны. Это обязательное условие. Не понял смысл этой кипнотической фразы.. 😁😁😁 Обязательное условие для чего??
ФЛЕКС БОКС с препроцессорной сеткой -ЭТО КРУТЬ РЕАЛЬНО!!!!
То есть flex для одной оси ,а grid для двух? И от суда вопрос не проще тогда использовать только grid или бывают какие то особые случаи где без flex'a никуда?
Grid использовать проще конечно, если проект не требует большой поддержки браузеров!
а если использовать полифил, например этот: github.com/FremyCompany/css-grid-polyfill
Тогда это сплошной геморой!
а в чем заключается геморой? подключил js файл и используешь свойства...
подключил js файл и лишняя нагрузка на сайт!
А ГДЕ ПРИМЕРЫ?!?!?! Смысл в таком видео
Да, у меня вопрос, не по теме конечно, но в чем отличие флексбокс от грида?
Видос крут, на будущее только добавлю, делай семплы маленькие, когда говоришь - показываешь. А так ЖИРНЫЙ ПЛЮС)))
Хорошо, постараюсь, спасибо
О видосик, збс.
Лайк поставьте=)
С радостью, тем более не жалеете времени и общаетесь со зрителями. Сразу видно хорошего человека))
сейчас в реальной разработке можно использовать только flex, но за grid будущее, так как технология еще сырая и плохо поддерживается в браузерах.
Знать и то и другое, нужно как минимум доля этого: (необходимо поправить сайт... Вы со знанием гридов пробуете выполнить ТЗ, а там все на флексах!!!) . Костыли и переписывание кода в придачу. Я начинающий кодер, не судите строго за недопонимание 😇 -это лишь мое мнение.
Я так понял если проект не подразумевает положение элементов сразу по двум осям то в принципе проще на flex сделать ? и да порог вхождение на грид выше чем флекс ?
в сложных проектах спокойно можно и комбинировать: грид для общей разметки, а флекс для точного расположения дизайна. а так как по мне легче с гридом.
Да, комбинируйте. Гриды не сложнее чем флексбоксы, как по мне даже легче)
Web Developer Blog так почему же все вокруг не используют гриды? Забыли самое главное. У гридов ооочень плохая поддержка браузерами, так что в ближайшие 2 года только флексы - 99.8%
@@TsA1ex добрый день. скажите как обстоят дела спустя 4 года с гридами и флексами сейчас? я прост только что посмотрел видео и стараюсь въехать в тему
Очень нравится ваш канал, будут ли уроки по фреймворку yii2?
Спасибо большое! Планирую пока ларавел!
Web Developer Blog давай уже что-то по пхп практике, возьми какой нить не сложный проект разбери, потом еще один по ларке/юи2
А то сильно много примитивной верстки на канале, которая учится за пару месяцев
Я как начинающий, хотел выразить свое мнение по поводу того как мне удобней было бы воспринимать материал, когда ты пытаешься обьяснить почему то или иное действие правильное ты иногда глубоко копаешь, а на той глубине новички не ориентируются, мне кажется должно быть что то вроде: нужно делать или делайте только так и краткое разьяснение почему, а когда человек уже начнет осваивать он поймет почему ты так сказал, ибо без знания твое чужое мнение нереально воспринять
Хорошо, учту, спасибо!
Web Developer Blog наоборот делайте как делали) новички которые захотят зайдут в гугл и изучат эту тему или позже поймут что к чему и всё встанет на свои места!)
В общем изучаю flexbox по вашим урокам и возник такой вопрос: У меня в шапке текст идет в две колонки, в media queiry прописал, чтобы на маленьких экранах, колонки выстраивались в столбик. Так вот, все работает - делал по вашим урокам, но беда в том, что шапка при этом сужается и часть текста исчезает в шапке и его нельзя прочесть. Надеюсь понятно объяснил-)
codepen и ссылку сюда, так не сильно понятно, может в шрифте дело?
В общем идея в том, что шапка должна быть 700px в высоту или на половину экрана. И посмотрите, что происходит, когда экран меньше становится.
codepen.io/Elator/pen/NgYOaY?editors=1100
ничего не понял что вы хотите, киньте макет который должен выйти картинкой
Вот проблема, на скриншоте, при уменьшении экрана, часть текста исчезает под шапкой.
my.jetscreenshot.com/demo/20170705-ukfx-99kb
в принципе то что и нужно было мне узнать, а то с css 3 фиг все выучишь, да проще но блин в css2 можно было четко знать, что знаешь почти все, а тут же верстаешь верстаешь и бац оказывается дисплей грид есть))
главное преимущество флексов в данный момент:
их уже можно использовать прямо сейчас, а гриды нет, плохая поддержка:
caniuse.com/#feat=flexbox vs caniuse.com/#feat=css-grid
а если использовать полифил?, например этот: github.com/FremyCompany/css-grid-polyfill
этот пример и на флексах можно сделать ппц.
У тебя ноутбук или компьютер?
Macboc
Я верстальщик с 7 летним опытом и зашел чисто посмотреть и такая вода, сравнение фуфло. Видать ты не умеешь флексами верстать
Конечно, семи лет опыта верстки у меня нет 👎🏻
@@SuprunAlexey суть не в твоих 7 лет а в том, что ты говоришь про флексы. Это нельзя, то нельзя флексами. Флексами все можно если руки есть. Флексы сейчас поддерживаются везде от кроссплатформенных приложении до веба. А то что ты говоришь в видео про "нельзя" можно лишь ухмылнуться и сказать "чувак не путай новичков"
Сколько времени назад вышло видео? :) понятное дело все меняется
@@SuprunAlexey ну это понятное дело, тогда тебе стоит глянуть в сторону перезалива видео с нынешними их свойстами и преимуществами.
Да вот сейчас плотно займусь каналом и будут видео
А по bootstrap есть уроки?
Уже нашли)
Похоже зачитано с какой-то статьи. Видео для видео.
та нет, рассказал в чем разница флексбокс и гридов
втему
Согласен что в тему
я гриша
ниачем. нах. такое пилить?
без наглядных примеров совсем ни че не понятно
наглядные примеры в плейлистах практики верстки сайтов ruclips.net/video/HB-Dj5qAo5k/видео.html
Впервые ставлю дислайк тебе бро 1 к 500