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

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

[@annblok_webdev]

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

[@bcanary4252]

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

[@Just-iw9ng]

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

[@cratasthymos]

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

[@annblok_webdev]

😊😊😊

[@autotopka]

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

[@arttur1672]

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

[@dudlik4080]

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

[@walex0797]

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

[@romankuzhel8027]

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

[@alex_morano]

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

[@maxim-cherkasov]

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

[@KostjaCzar]

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

[@online-df6fo]

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

[@user-ff3lc1et3u]

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

[@AlexAlex-sh3mz]

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

[@user-zo5lq4nx5j]

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

[@user-wc9ni9ov1o]

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

[@uncledeveloper1356]

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

[@Aleksandr_Kub]

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

[@bdserver]

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

[@trendsgallery]

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

[@Darkys1206]

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

[@DogAndKiller]

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

[@alexandrlevin211]

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

[@user-wr7fo3ix9u]

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

[@annblok_webdev]

🤗

[@user-qb5ro6zi3s]

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

[@kyperchill7327]

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

[@Cat_Sterling]

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

[@plsdontbuyawp2987]

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

[@vladimirsmoktiy2040]

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

[@yanmay8614]

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

[@user-on3vi5hk4r]

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

[@mr.krogan2210]

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

[@olehkis4787]

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

[@user-xc8ts4fu7j]

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

[@user-di6gb7ei6r]

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

[@SashaKuzikov]

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

[@voronaizlissabona]

локоны

[@allasansorh2598]

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

[@fitwist]

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

[@annblok_webdev]

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

[@innadark8885]

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

[@eugeniuszjarocki109]

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

[@annblok_webdev]

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

[@surt4012]

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

[@artemnikitin9696]

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

[@annblok_webdev]

☺️

[@wonder8611]

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

[@user-pz1ri4ph4v]

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

[@peacefulquasar]

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

[@user-zx5st3fq7x]

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

[@EugeneVe]

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

[@user-js4il4tp9h]

Отличное объяснение !!!

[@veshua_j]

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

[@user-yr9se1pi2z]

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

[@user-ed6ek8cv9s]

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

[@user-xn9km1bh7y]

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

[@dmitrijponkin]

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

[@annblok_webdev]

Спасибо 😊

[@user-kh3pc6hd1o]

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

[@sanekvelikiy]

всё понятно,автору респект!

[@pashauhovskiy5740]

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

[@Anodoree]

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

[@besada89]

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

[@user-gg1br5zo7m]

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

[@user-fc3gh1rb7w]

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

[@vvkbees6473]

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

[@igorenzia]

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

[@AdiletTV]

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

[@annblok_webdev]

❤️

[@_Lanselot_]

БлагоДарю!

[@dobramorda9818]

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

[@vitalypetrov5370]

Ты такая умница, спасибо!

[@user-qf7ve3mg7m]

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

[@1ngamer]

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

[@annblok_webdev]

Спасибо 😊

[@mrn748]

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

[@-Forever-Young-]

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

[@user-gs2rs6vj1u]

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

[@jamesdarrel4540]

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

[@annblok_webdev]

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

[@babywalker5659]

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

[@justoleg6001]

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

[@AlxAux]

Замечательно. Спасибо.

[@AkashiyaMokaV]

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

[@thisfil]

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

[@melissasofie7681]

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

[@annblok_webdev]

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

[@melissasofie7681]

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

[@annblok_webdev]

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

[@melissasofie7681]

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

[@user-qh5fr3yo1w]

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

[@user-cb5xj1lg1l]

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

[@user-iz9is7wm9d]

спасибо!

[@yakut54]

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

[@user-yq3km7vj5e]

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

[@annblok_webdev]

Все верно :)

[@user-fz5qd5cm1r]

Спасибо!

[@luxarmiger5729]

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

[@lphoenixl7771]

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

[@yuridimitrov8757]

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

[@glebbsif]

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

[@user-lo9pu9vd8p]

Спасибо, то что надо.

[@umbradolores8836]

Отлично!

[@mambasacaremamba2671]

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

[@user-cv7fi9uj1d]

Супер! Деваха молодец! Четко все раскидала! Grid CSS кстати в React'е в полный рост применяется

[@Th0rN13-Yt]

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

[@annblok_webdev]

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

[@Th0rN13-Yt]

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

[@annblok_webdev]

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

[@user-ey7rd9ih4g]

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

[@zhenikosha]

умничка Анна, спасибо

[@vladikiizikzon8195]

Просто супер. Мне очень понравилось. Лайк

[@gerompauel]

Все понятно, спасибо:)

[@Black.R.o.c.k]

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

[@annblok_webdev]

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

[@Atanepes]

Спасибоооо дорагая сестренка мне 23 я начал изучать про верстку и мне было узнать про эти ошибки которого сдлеаем или разницуу между флекс грид и.т.п ❤❤❤

[@komilguliev251]

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

[@Just-iw9ng]

Хорошее объяснение

[@morto4220]

2:00 чтобы элемент перешел на новую строку можно повесить .box:nth-child(4n+1) {clear: left}, если нужно переводить на новую строку через каждые 4 элемента и не плодить ненужные элементы на странице

[@user-yh8to5ys9h]

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

[@annblok_webdev]

Спасибо 🤗

[@mnimaya4252]

Божественное объяснение

[@alexeyshevchenko369]

Зачётно, спасибо.

[@user-kt6pl7fj3o]

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