В чем разница Flexbox и CSS Grid. Что использовать CSS Grid layout или Flexbox.

Рет қаралды 39,376

7 жыл бұрын

Всем привет, в этом видео мы опять поговорим на тему 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
Видео про заработок на KZfaq - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================

Пікірлер: 71

@meowmeowmeowmeow000 6 ай бұрын

спасибо за теорию без практики, чертов гений

@zhonik1999 5 жыл бұрын

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

@SergiyHavriluk 5 жыл бұрын

В целом ок, но без примеров сложно представить

@user-fo3mr6gm6y Жыл бұрын

То что я искала! Спасибо , буду смотреть и другие видио

@rodionantonichev2412 6 жыл бұрын

Видос крут, на будущее только добавлю, делай семплы маленькие, когда говоришь - показываешь. А так ЖИРНЫЙ ПЛЮС)))

@SuprunAlexey 6 жыл бұрын

Хорошо, постараюсь, спасибо

@span4ev 7 жыл бұрын

Очень нужное видео, спасибо

@SuprunAlexey 7 жыл бұрын

Это хорошо

@ludmilakaraseva2097 Ай бұрын

Добрый день! Благодарю за краткое и понятное объяснение! Подскажите, в случае, когда мне нужно расположить элементы, чтобы на компе они были друг на против друга (фото слева, текст права от фото), а на мобильниках, чтобы текст уходил под фото, что лучше здесь использовать? flex или grid? Заранее благодарю!

@user-nq3nn8vy9f 7 жыл бұрын

О видосик, збс.

@SuprunAlexey 7 жыл бұрын

Лайк поставьте=)

@user-nq3nn8vy9f 7 жыл бұрын

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

@prsion1925 6 жыл бұрын

ФЛЕКС БОКС с препроцессорной сеткой -ЭТО КРУТЬ РЕАЛЬНО!!!!

@povtukatb 7 жыл бұрын

Я как начинающий, хотел выразить свое мнение по поводу того как мне удобней было бы воспринимать материал, когда ты пытаешься обьяснить почему то или иное действие правильное ты иногда глубоко копаешь, а на той глубине новички не ориентируются, мне кажется должно быть что то вроде: нужно делать или делайте только так и краткое разьяснение почему, а когда человек уже начнет осваивать он поймет почему ты так сказал, ибо без знания твое чужое мнение нереально воспринять

@SuprunAlexey 7 жыл бұрын

Хорошо, учту, спасибо!

@user-fs8dd2wp7e 6 жыл бұрын

Web Developer Blog наоборот делайте как делали) новички которые захотят зайдут в гугл и изучат эту тему или позже поймут что к чему и всё встанет на свои места!)

@bartoszpierdolny6978 7 жыл бұрын

Очень нравится ваш канал, будут ли уроки по фреймворку yii2?

@SuprunAlexey 7 жыл бұрын

Спасибо большое! Планирую пока ларавел!

@Qwerty-gz3kb 5 жыл бұрын

Web Developer Blog давай уже что-то по пхп практике, возьми какой нить не сложный проект разбери, потом еще один по ларке/юи2 А то сильно много примитивной верстки на канале, которая учится за пару месяцев

@dimaster5880 6 жыл бұрын

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

@denispanarin 5 жыл бұрын

03:46 подписывайтесь на какнал , если еще не подписаны. Это обязательное условие. Не понял смысл этой кипнотической фразы.. 😁😁😁 Обязательное условие для чего??

@astasjr8969 5 жыл бұрын

А ГДЕ ПРИМЕРЫ?!?!?! Смысл в таком видео

@artursteirumniks1265 7 жыл бұрын

То есть flex для одной оси ,а grid для двух? И от суда вопрос не проще тогда использовать только grid или бывают какие то особые случаи где без flex'a никуда?

@b-ars07 7 жыл бұрын

Grid использовать проще конечно, если проект не требует большой поддержки браузеров!

@MaksimIsaaevich 7 жыл бұрын

а если использовать полифил, например этот: github.com/FremyCompany/css-grid-polyfill

@SuprunAlexey 7 жыл бұрын

Тогда это сплошной геморой!

@MaksimIsaaevich 7 жыл бұрын

а в чем заключается геморой? подключил js файл и используешь свойства...

@b-ars07 7 жыл бұрын

подключил js файл и лишняя нагрузка на сайт!

@user-pc4eg6rz2m 2 ай бұрын

Да, у меня вопрос, не по теме конечно, но в чем отличие флексбокс от грида?

@user-dq9jl6gd9n 5 жыл бұрын

в принципе то что и нужно было мне узнать, а то с css 3 фиг все выучишь, да проще но блин в css2 можно было четко знать, что знаешь почти все, а тут же верстаешь верстаешь и бац оказывается дисплей грид есть))

@mushnikov35 7 жыл бұрын

Я так понял если проект не подразумевает положение элементов сразу по двум осям то в принципе проще на flex сделать ? и да порог вхождение на грид выше чем флекс ?

@ZeniRUS 7 жыл бұрын

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

@SuprunAlexey 7 жыл бұрын

Да, комбинируйте. Гриды не сложнее чем флексбоксы, как по мне даже легче)

@TsA1ex 6 жыл бұрын

Web Developer Blog так почему же все вокруг не используют гриды? Забыли самое главное. У гридов ооочень плохая поддержка браузерами, так что в ближайшие 2 года только флексы - 99.8%

@barkliDetolli 2 жыл бұрын

@@TsA1ex добрый день. скажите как обстоят дела спустя 4 года с гридами и флексами сейчас? я прост только что посмотрел видео и стараюсь въехать в тему

@Elator11777 7 жыл бұрын

В общем изучаю flexbox по вашим урокам и возник такой вопрос: У меня в шапке текст идет в две колонки, в media queiry прописал, чтобы на маленьких экранах, колонки выстраивались в столбик. Так вот, все работает - делал по вашим урокам, но беда в том, что шапка при этом сужается и часть текста исчезает в шапке и его нельзя прочесть. Надеюсь понятно объяснил-)

@SuprunAlexey 7 жыл бұрын

codepen и ссылку сюда, так не сильно понятно, может в шрифте дело?

@Elator11777 7 жыл бұрын

В общем идея в том, что шапка должна быть 700px в высоту или на половину экрана. И посмотрите, что происходит, когда экран меньше становится. codepen.io/Elator/pen/NgYOaY?editors=1100

@SuprunAlexey 7 жыл бұрын

ничего не понял что вы хотите, киньте макет который должен выйти картинкой

@Elator11777 7 жыл бұрын

Вот проблема, на скриншоте, при уменьшении экрана, часть текста исчезает под шапкой. my.jetscreenshot.com/demo/20170705-ukfx-99kb

@x7yx9iu7 10 ай бұрын

Знать и то и другое, нужно как минимум доля этого: (необходимо поправить сайт... Вы со знанием гридов пробуете выполнить ТЗ, а там все на флексах!!!) . Костыли и переписывание кода в придачу. Я начинающий кодер, не судите строго за недопонимание 😇 -это лишь мое мнение.

@Cj_segr 3 жыл бұрын

этот пример и на флексах можно сделать ппц.

@PacoOfficial 7 жыл бұрын

главное преимущество флексов в данный момент: их уже можно использовать прямо сейчас, а гриды нет, плохая поддержка: caniuse.com/#feat=flexbox vs caniuse.com/#feat=css-grid

@MaksimIsaaevich 7 жыл бұрын

а если использовать полифил?, например этот: github.com/FremyCompany/css-grid-polyfill

@AlibekKulseitov 4 жыл бұрын

Я верстальщик с 7 летним опытом и зашел чисто посмотреть и такая вода, сравнение фуфло. Видать ты не умеешь флексами верстать

@SuprunAlexey 4 жыл бұрын

Конечно, семи лет опыта верстки у меня нет 👎🏻

@AlibekKulseitov 4 жыл бұрын

@@SuprunAlexey суть не в твоих 7 лет а в том, что ты говоришь про флексы. Это нельзя, то нельзя флексами. Флексами все можно если руки есть. Флексы сейчас поддерживаются везде от кроссплатформенных приложении до веба. А то что ты говоришь в видео про "нельзя" можно лишь ухмылнуться и сказать "чувак не путай новичков"

@SuprunAlexey 4 жыл бұрын

Сколько времени назад вышло видео? :) понятное дело все меняется

@AlibekKulseitov 4 жыл бұрын

@@SuprunAlexey ну это понятное дело, тогда тебе стоит глянуть в сторону перезалива видео с нынешними их свойстами и преимуществами.

@SuprunAlexey 4 жыл бұрын

Да вот сейчас плотно займусь каналом и будут видео

@Elator11777 7 жыл бұрын

А по bootstrap есть уроки?

@SuprunAlexey 7 жыл бұрын

Уже нашли)