What is the difference between Float, Flexbox and Grid CSS?

Рет қаралды 216,677

5 жыл бұрын

Flex: tpverstak.ru/flex-cheatsheet/
Grid: tpverstak.ru/grid/
Game Grid: cssgridgarden.com/#ru
Ask a free question frontend developer - frontendhelp.me

Пікірлер: 536

@annblok_webdev Жыл бұрын

🔥 Бесплатный интенсив по веб-разработке: frontendblok.com/intensives/start

@bcanary4252 4 жыл бұрын

Рикардо милос устроился в отдел разработки css, и устроил там дикий flex. Вот так и появился flexbox :)

@Just-iw9ng 4 жыл бұрын

Зафлэксил нам флексы... Им вдохновлялись

@cratasthymos 2 жыл бұрын

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

@annblok_webdev 2 жыл бұрын

😊😊😊

@autotopka 3 жыл бұрын

Люблю когда все по делу и проработанный материал, спасибо за труд, лайк однозначно!

@arttur1672 5 жыл бұрын

Спасибо,систер по разметке. Клёвый формат и подача материала. Добра тебе и денежек,ждём новых видосиков

@dudlik4080 5 жыл бұрын

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

@romankuzhel8027 5 жыл бұрын

Твои интерактивные примеры просто космос! Спасибо :)

@maxim-cherkasov 3 жыл бұрын

Ютюб показал видео очень вовремя. И вы объяснили все четко и быстро. Хорошо, когда вче так сходится.

@KostjaCzar 5 жыл бұрын

Умничка) честно говоря не ожидал что будет на сколько все доступно и понятно сказано)

@SashaKuzikov 5 жыл бұрын

Спасибо, что без воды и соплей. Сухо и локонично.

@voronaizlissabona 3 жыл бұрын

локоны

@AlexAlex-sh3mz 4 жыл бұрын

это просто невероятно, сжато, четко, все по пунктам. Спасибо большое

@walex0797 5 жыл бұрын

Благодарю за видео , и Ваш труд . Изучать html и css начал месяц назад , очень четко и понятно ! Спасибо !

@Anodoree 5 жыл бұрын

Видео случайно вывело в рекомендованных. Стало интересно... Подозрительно даже несколько) Но проверив, оказалось очень годно: речь приятная, четкая, чистая; очень понятно всё разъяснено; без всякого мусора в речи. В общем - очень высокие показатели для усвоения информации аудиторией, однако) Ну, а про уместные вставки с необыкновенно красивой девушкой, которая оказалась еще и таким молодцом, говорить, думаю не стоит) И так теперь понятно) Крайне приятно удивлён) P.S. Пересмотрю весь контент сначала и жду новых видео) Думаю, такой далеко не один) P.P.S. О-о-очень приятно удивлён))) От души желаю больше успехов и добра вокруг!)))

@besada89 5 жыл бұрын

Вот и я тоже пришел с этого видео, но жаль что кроме него на канале ничего информативного и полезного нет.

@user-gg1br5zo7m 4 жыл бұрын

ты чо попутал, тут что не видео, то шедевр, все о верстке и по делу

@online-df6fo 5 жыл бұрын

Все по материалу четко структурировано и доступным языком!

@allasansorh2598 3 жыл бұрын

Очень круто! Еще бы с grid-template-rows наглядно разобраться )

@Aleksandr_Kub 3 жыл бұрын

Неожиданно нашел ответ на мучивший меня, как начинающего верстака, вопрос. Выражаю благодарность )))

@kyperchill7327 5 жыл бұрын

Очень понятно и очень доступно. Ты молодец. Лайк заслуженно.

@user-qb5ro6zi3s 4 жыл бұрын

Обалдеть. Насколько же это круто. Я вот недавно задавался вопросами о разнице float и flex, а также мне интересно было, можно ли их совмещать. И вот он ответ!!! Большое Спасибо! Лайк от меня!

@alex_morano 3 жыл бұрын

Спасибо большое!! Ваши видео - это полезное с приятным)))

@eugeniuszjarocki109 5 жыл бұрын

Огромное спасибо за шпаргалки по CSS Grid и Flexbox! Очень доступно и понятно оформлено, сохранил себе в закладки :)

@annblok_webdev 5 жыл бұрын

Не за что 😊 Пользуйтесь

@plsdontbuyawp2987 4 жыл бұрын

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

@olehkis4787 5 жыл бұрын

Классный обзор, спасибо)

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

Спасибо огромное за видео,что объяснили подробно мне старику.

@user-zo5lq4nx5j 4 жыл бұрын

Отличное объяснение, спасибо! Однозначно лайк👍

@1ngamer 5 жыл бұрын

Случайно выпало в рекомендациях - не пожалел, что перешёл. Пускай для себя ничего нового не узнал (ибо уже знаком со всем перечисленным), но всё равно слушать было очень интересно и приятно. Анна, Вы очень милая девушка и всё внятно и доходчиво объясняете. Слушал бы и слушал)

@annblok_webdev 5 жыл бұрын

Спасибо 😊

@mrn748 4 жыл бұрын

Это точно. Очень внятно. Но реклама, врывающаяся посреди важного момента каждые 2 минуты или появляющаяся снизу, перекрывая контент..это, конечно что-то с чем-то..(ПС:не хочу отключать рекламу в браузере по определенным причинам).

@-Forever-Young- 3 жыл бұрын

@@mrn748 не ной тогда

@user-ff3lc1et3u 4 жыл бұрын

Спасибо, отличное видео, успехов каналу в дальнейшем

@user-xc8ts4fu7j 3 жыл бұрын

Спасибо за такое наглядное объяснение😘

@Darkys1206 4 жыл бұрын

Круто, спасибо! Очень помогла)

@DogAndKiller 4 жыл бұрын

Спасибо. Давно хотел разобраться в этом.

@dobramorda9818 5 жыл бұрын

"Поэтому если тебе интересно, то продолжай смотреть" - Анна Блок© В целом видео весьма информативное , автору спасибо большое.

@playbey5970 4 жыл бұрын

Привет. Видео полезное, однозначно лайк. Скажи пожалуйста что за "инструмент" которым ты пользуешься? Очень удобно)

@mr.krogan2210 4 жыл бұрын

Ты молодец, очень полезные ролики, помогли мне. Спасибо!

@bdserver 3 жыл бұрын

классно объясняет без лишнего и быстро доступно!

@vvkbees6473 4 жыл бұрын

Насколько чётко и информативно девушка излагает информацию . Очень понравилось!Спасибо!

@uncledeveloper1356 4 жыл бұрын

Спасибо, довольно интересно рассказали, отдельное спасибо за шпоры

@peacefulquasar 4 жыл бұрын

Хороший формат и приятная подача)

@Cat_Sterling 5 жыл бұрын

Спасибо за информацию, очень здорово и доходчиво!

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

Отличный рассказ с детальной инструкцией по роботе.

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

Уже долгое время не занимаюсь вебом. Но вот наткнулся случайно на ваше видео и обнаружил что сейчас верстать макет одно удовольствие. Начинал вобще с HTML и все блоки сайта выполнялись в виде таблицы. Потом CSS и Float! Ну а теперь это просто подарок судьбы, радость какая.)))))

@yanmay8614 5 жыл бұрын

Большое спасибо за урок!

@yuridimitrov8757 5 жыл бұрын

Видео специализированное, оно для тех, кто понимает или сталкивался с темой. Мне больше понравилась дикция автора и темп-в самый раз, с нормальными паузами!

@user-kh3pc6hd1o 3 жыл бұрын

Очень информативно,воды ноль,только всё по делу👍

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

Полезный ролик! Внятно и доходчиво все рассказали! Ну просто разжевали! Благодарю!

@user-xn9km1bh7y 3 жыл бұрын

Пишу из 2020-го ) Лаконично и доходчиво!) Спасибо!

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

Милая верстальщица) спасибо за ролик)в теме шарю, но все равно интересно как разные люди подносят информацию)

@andriano4elentano276 3 жыл бұрын

Я тоже захожу чтобы мальвиной полюбоваться!)

@user-tw2fp7cv3g 3 жыл бұрын

@@andriano4elentano276 А я для получения навыков и заметил, что Анна не красотка в общем-то, но вот в этом видео она весьма красива. Все-таки везет же бабам, что у них всегда есть возможность выглядеть красиво. Нужна лишь правильная прическа и макияж.

@alexandrlevin211 3 жыл бұрын

Спасибо Вам огромное, здоровья и успехов!!

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

Очень хорошая подача материала !!!

@EugeneVe 5 жыл бұрын

Спасибо, очень доступно

@surt4012 5 жыл бұрын

очень полезное видео.Спасибо !

@babywalker5659 4 жыл бұрын

спасибо за краткость и шпаршалки)

@yakut54 5 жыл бұрын

В теме шарю. Более чем! Но тоже оторваться не могу... 😍

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

все подробно и хорошо объяснили. очень интересный ролик.

@wonder8611 5 жыл бұрын

Супер, спасибо огромное!

@MoranKitz 4 жыл бұрын

Увидел на вашей полке книги по Star Wars. Теперь я полюбил Вас ещё больше

@user-yh8to5ys9h 2 жыл бұрын

То что искал кратко и понятно Царский Лайк))) Контент тоже класс

@annblok_webdev 2 жыл бұрын

Спасибо 🤗

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

Всё предельно ясно и доходчиво объяснили

@BarmaleyPlay 5 жыл бұрын

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

@annblok_webdev 5 жыл бұрын

Barmaley 😊

@Zhenia-nh4qx 5 жыл бұрын

Также, в теме шарю, но оторваться не смог

@VanStabHolme 5 жыл бұрын

Шааарииишь)))))))

@alexlevin8503 5 жыл бұрын

Такая же ситуация, как то случайно попалось видео, не ожидал такого на просторах русскоязычного ютуба, если она еще и в прикладной разработке шарит, то вообще потрясающе... Лайк!

@cars_owners 5 жыл бұрын

Не шарю, только учу и для меня очень ценная информация, так как начал делать пробники с флоат, а можно тупо взять грид сетку.

@jamesdarrel4540 3 жыл бұрын

Господи, благослови тебя Анна, всё искал ответы на некоторые вопросы, и в твоих видео нашёл то что нужно!) Ты супер, продолжай так-же, ты молодец. Ещё раз спасибо) Подписался!)

@annblok_webdev 3 жыл бұрын

Рада, что видео помогают 🤗

@dmitrijponkin 5 жыл бұрын

Анна, спасибо! Хороший обзор))

@annblok_webdev 5 жыл бұрын

Спасибо 😊

@vladimirsmoktiy2040 5 жыл бұрын

отличная подача материала, спасибо.

@innadark8885 5 жыл бұрын

Отличное видео , было очень интересно посмотреть

@user-wr7fo3ix9u 3 жыл бұрын

Спасибо, Аня! Очень полезное видео!

@annblok_webdev 3 жыл бұрын

🤗

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

Профессионально все разъяснено. Автору благодарность.

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

Согласен. Познавательный ролик

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

удивительно, какими бывают программисты. Помню, когда я учился, таких девушек интересовало все, что угодно, кроме учебы... Однозначно, это достойно уважения! Как начинающий веб-программист, я бы с радостью взял такого преподавателя, с перспективой на будущее.

@AdiletTV Жыл бұрын

Я конечно много it каналов хороших видел, но... такой формат впервые. Каждое слово по делу и каждый материал прикрепляется практикой + показывается где она используется...... Лайк и подписка однозначно!

@annblok_webdev Жыл бұрын

❤️

@jriyzavada3408 5 жыл бұрын

Спасибо, не знал о Grid CSS.

@fitwist 5 жыл бұрын

Спасибо большое человеческое. Пожалуйста, продолжайте!

@annblok_webdev 5 жыл бұрын

Не за что 😊 продолжать буду!

@trendsgallery Жыл бұрын

Спасибо, Анна. Хороший урок.

@veshua_j Жыл бұрын

Хорошее видео! Начал изучать html и css. Добрался до flex, вроде понял как работает. Пойду изучать grid

@igorenzia 4 жыл бұрын

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

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

Вот это да. Ну спасибочки

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

Спасибо! Доступно и понятно про все существующие виды разметки. Помню время когда только с float верстали. Вообще в целом с float это дикие костыли, т.к он изначально был предназначен для обтекания текста. Но другого выхода не было, т.к верстать таблицами это вообще жесть. С появлением flex и сеток на основе flex стало удобнее. То чувство, когда не понял почему разъехались блоки уже не посещает. С grid вообще все шикарно стало, но в продакшн его пока рановато. Может через годик, когда все браузеры поддержат на 100%. Вдруг заказчик сайта через оперу сидит)

@annblok_webdev 5 жыл бұрын

Все верно :)

@MachtFeuer 5 жыл бұрын

Здравствуйте! С меня подписка и лайк, давно искал такую информацию. А можно ли использовать flexbox внутри гридов ?

@annblok_webdev 5 жыл бұрын

Не могу представить визуально ситуации, при которой это потребовалось бы делать. Может у вас пример такого макета есть, чтобы можно было разобрать?

@komilguliev251 5 жыл бұрын

спасибо за хорошее объяснение;)

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

Автору большое спасибо за хорошее видео. Отдельное спасибо за шпаргалки. Очень классная штука.

@Th0rN13-Yt 5 жыл бұрын

Ссылки забыла: Flex: tpverstak.ru/flex-cheatsheet/ Grid: tpverstak.ru/grid/ Игра про grid: cssgridgarden.com/#ru

@annblok_webdev 5 жыл бұрын

Эти ссылки находятся в описании под видео

@Th0rN13-Yt 5 жыл бұрын

может я слепой? i.imgur.com/WC9mcNO.png

@annblok_webdev 5 жыл бұрын

Ок, поняла в чем проблема. В английском интерфейсе меньше ссылок. Дополнила информацию 👍

@user-ey7rd9ih4g 3 жыл бұрын

@@Th0rN13-Yt все ссылки в описании под роликом, а не там где вы лазите!

@glebbsif 5 жыл бұрын

Просто ясно лаконично) спасибо

@melissasofie7681 5 жыл бұрын

Спасибо. Видео помогло расставить все мысли по этой теме на нужные полки.

@annblok_webdev 5 жыл бұрын

Tita tita рада, что это видео было полезно для вас 😊

@melissasofie7681 5 жыл бұрын

@@annblok_webdev было бы круто если бы вы сняли видео про : :before и : :after.

@annblok_webdev 5 жыл бұрын

Tita tita уже на канале 👍🏻

@melissasofie7681 5 жыл бұрын

@@annblok_webdev Спасибо огромное, получилось очень круто.

@artemnikitin9696 2 жыл бұрын

Спасибо , Анна. Вы сделали очень понятный и классный урок

@annblok_webdev 2 жыл бұрын

☺️

@luxarmiger5729 3 жыл бұрын

Спасибо!!! В свое время верстку забросил из-за этих floatов. Хвала всевышнему, что появились флекс-боксы с гридами.

@sevgenberg585 5 жыл бұрын

Можешь сделать уроки по веб компонентам. Если можно то еще по анимации, желетельно с использованием нативного кода. Расскажи пожалуйста про миксины, которые только появились в CSS

@pashauhovskiy5740 5 жыл бұрын

полезное видео !спасибо тебе

@mambasacaremamba2671 4 жыл бұрын

Благодарочка, норм контент особенно для новичков

@umbradolores8836 5 жыл бұрын

Отлично!

@Mayrbachaev 5 жыл бұрын

Приятный голос, приятная внешность и объясняет доходчиво! Супер! ПОЛНЫЙ КОМПЛЕКТ верстальщиц )

@user-kt6pl7fj3o 3 ай бұрын

Канал определенно заслуживает лайк и подписку

@lphoenixl7771 3 жыл бұрын

Вай, спасибо. Видео топ ^^

@thisfil 5 жыл бұрын

Спасибо за видео

@arttur1672 Жыл бұрын

Хорошая подача материала. Спасибо за контент. Как верстаете в 2023 адаптивность? Используете бутстрап или медиазапросы?

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

конечно медиа!

@AkashiyaMokaV 4 жыл бұрын

Отлично излагаешь. спасибо :)

@justoleg6001 4 жыл бұрын

Большое спасибо )

@Black.R.o.c.k 4 жыл бұрын

Очень полезное видео Just Like, но хотелось бы узнать по больше про grid и flex

@annblok_webdev 4 жыл бұрын

Могу порекомендовать марафоны tpverstak.ru/grid-marathon/ и tpverstak.ru/flexbox-marathon/ Там мы разбираем все тонкости

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

Спасибо за информацию, отличное видео! Наконец-то нормально реализовали все это, давно пора) И таблицы и float - это костыли по сути.

@romanm4391 5 жыл бұрын

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