Что лучше: Bootstrap или Flexbox?

Этим вопросом задаются почти все, кто недавно начал заниматься вёрстка сайтов. Сначала разбираются с базовыми вещами, такими как html и css3. Но в css есть 2 больших модуля - flexbox и grid, которые сложно понять сразу, поскольку они содержат большое количество своих свойств. И даже узнав о том, что такое css flexbox и grid многие не понимают когда что из них использовать. Но всё ещё больше усложняется, когда разработчики начинают погружаться во фреймворки, такие как bootstrap, foundation, bulma и многие другие.
Дело в том, что на сайте очень часто блоки располагаются в сетке. Иногда это просто блоки по 50%, а иногда и несколько колонок. И вот когда верстальщик видит несколько колонок, перед ним встаёт вопрос - Как делать? flexbox, bootstrap 4, grid, float? Те, кто не изучал flexbox и grid, скорее всего начнут делать сайт на float или bootstrap. Но правильно ли это?
В этом видео я на примерах расскажу когда и что желательно использовать.

[@prosto_razrabotka]

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

[@АвгустШтарк]

Виталий, вы потрясающе объясняете! Я очень рад, что есть такие люди, как вы! Огромное вам спасибо!

[@prosto_razrabotka]

Спасибо)

[@alessandrobranchetti2018]

Давно себе задавал этот вопрос, не мог понять разницу) Пояснение просто бомба, спасибо!

[@prosto_razrabotka]

Благодарю -)

[@fmleglrmglrml]

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

[@ВладимирвладимиР-ь8ш]

​@@fmleglrmglrml так ,что учить начинать после html?css grid? css flexbox ну и т.п.?только html заканчиваю.

[@ВладимирАнтонович-п9д]

очень интересно, но ничего не понятно( пойду дальше таблицами верстать

[@prosto_razrabotka]

Тоже вариант.

[@Vladikslavik]

Не забудьте про медиа-запросы )))

[@fmleglrmglrml]

@@Vladikslavik пффффф медиа запросы могут понадобиться и при вёрстке на бутстрапе, что такого в медиазпросах плохого? Медиазпросы между таблицами не связаны неразрушимой связью ,они используются и при флексах и при гридах ,так что не могу понять предъяв к медиазпросам...

[@i.n.9761]

Юзеры outlook будут премного благодарны)

[@TheProfessionalGambler]

CSS таблицы в тренде

[@ДмитрийПономарев-д1ю]

Что за восхитительная музыка на заднем фоне в начале видео? Мое сознание будто бы уносится в мир грез под эти божественные ангельские звуки

[@sersch5341]

Кому окна поменять? Я прошел курс..

[@ozirisdark6449]

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

[@ИоаннаСвятая]

Очень понятная и хорошая подача.

[@neumexa6832]

Пока нашел только три канала, где понятно объясняют сложные новичку вещи. Это тут, гло академия и айтидоктор. Спасибо за Ваш труд!

[@prosto_razrabotka]

Благодарю

[@TortugaStudio]

а как же фрилансер по жизни?

[@neumexa6832]

@@TortugaStudio Про него узнал позже. Сейчас он тоже в списке. Так же Анна Блон и еще несколько человек. Список растет)

[@imvasia13]

Виталий, в будущем будут уроки по JS?

[@deomidfedorov1440]

Долго долго долго долго не мог этого понять. Спасибо.

[@prosto_razrabotka]

Не за что -)

[@scanlin_88]

Уф, а вот только сегодня сайт делал впервые с бутстрапом. Покидал свойства и понимаю, что мне он нафиг не нужен, сам справляюсь. Но всё же искал смысл его использования. Спасибо за разъяснения, очень к месту и вовремя😃

[@funprovobis8189]

Топовый контент! Одним словом - ролик в топ. Спасибо за работу)

[@nikolaborkowski9942]

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

[@prosto_razrabotka]

Спасибо. Приятно слышать -)

[@yaroslavbulavin3613]

лично у меня бутстрап вызывает рвотный рефлекс😂

[@antonmaklakov]

Спасибо за видеоролик! Вот бы ещё увидеть ролик на тему:"Что лучше:flexbox или grid?"

[@SeganMert]

Появление Flexbox решило некоторые проблемы в верстке, но они предназначены для простых одномерных макетов, а Grid не сложных двумерных что даёт больше возможностей именно для сложных вариантов задачи Но никто не запрещает использовать и то и то в одном проекте Так что по сути тут вопрос сложности и простоты для реализации

[@GamingTest]

можешь снять видос по джаваскрипту и как его использовать, допустим после верстки сайта на html и css. И также хочу спросить как верстают интернет магазины, там же в ручную каждую карточку товара не верстают. Почти все видео просмотрел уже.

[@graezzywormz1438]

Когда переходишь на страницу товара, данные товара загружаются с сервера, и рендерятся в карточку товара для пользователя

[@БогданЗбаражский-щ5ж]

Я уже устал лайкать ваши видео 😂 Спасибо большое

[@igorgraf2403]

СПС. Не зря остановился на видео. Хорошая аналогия, ясно и понятно )

[@vladpoligon]

Лучший!

[@placid3495]

Класс! Вроде бы очевидные вещи, но сам я как-то не задумывался об этом)

[@prosto_razrabotka]

А вы задавались этим вопросом?

[@codedesign9261]

Я вчера целый день этим вопросом задавался! Просто невероятно насколько исчерпывающе вы дали ответ. Единственное у меня ещё есть "ламерский" вопрос: - Насколько корректно использовать в одном проекте grid и bootstrap например ?

[@forgiveness_denied]

Веталь привет, я не понмаю есть css float, css flexbox, css positioning, css grid, что из этого уже устарело? на что обратить внимание ?? я что то совсем запутался ( сделать может видео по этому, а то куча роликов хз что учить, сделал бы кто то вот верстаем сайты на гридах, а вот галерею фоток делаем с флоатом и тд , спасибо

[@jemilsuleimanov209]

Спасибо за канал, очень полезно и выручает. Будет ли видос по flexboxgrid2 ?

[@nitron4eg299]

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

[@prosto_razrabotka]

Воуу.. вот это серьёзная заявка -) Спасибо)

[@shultsev.alexander]

Спасибо, это было потрясающе!

[@prosto_razrabotka]

Спасибо

[@mixture3084]

Хорошая ассоциация со стеклами и окнами. Надеюсь до некоторых "дизайнеров" это доходит. Я прекрасно понимаю какого мастеру который меняет стекло :D и как ЛЕГКО поменять окно.

[@natekeehl9200]

Спасибо , наконец-то понял зачем что к чему)

[@CutTheMovies]

Чувак, где брови?

[@ВалерияЗолотарёва-д6в]

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

[@prosto_razrabotka]

Миксовать можно. Но описанный вами пример некорректный.

[@vladyslavyermolayev8186]

Привет, если не секрет на что снимаешь и в какой программе обрабатываеш видео?

[@prosto_razrabotka]

Lumix G7 / Premiere Pro

[@vladyslavyermolayev8186]

@@prosto_razrabotka Было бы круто посмотреть backstage, как идёт подготовка к уроку, как снимаешь и т. д.

[@tebsadjlrr221]

Хорошая аналогия :)

[@RedkeiGost]

Ну, я автору конечно ничего не открою, но споры вызваны тем, что единственной полезной функцией, которую замечали в бутстрапе новички и руководители была как-раз сетка. Т.е. ни типографику, ни ui особо не оценили, мол, кнопочки и кнопочки, что такое типографика вообще фиг знает по большому счету, а вот сетка это да. И говорили "верстай на бутстрапе, а то поплывет сайт, знаю я вас, верстальщиков. Т.е. способ заюзать сетку сравнивается со способом заюзать сетку. Лично для меня проблемы с сеткой просто не было, когда я верстал в начале десятых. Достаточно было почитать какую-нибудь книгу Иттона Маккота и быть чуть аккуратнее. Но бутстрап все-равно позволял взять какой-нибудь сайтиг с куцым и доморощенным дизайном, прикрепить файлиг и фигась - сайтиг становился гораздо симпатичнее.

[@forgiveness_denied]

дубль2: Веталь привет, я не понмаю есть css float, css flexbox, css positioning, css grid, что из этого уже устарело? на что обратить внимание ?? я что то совсем запутался ( сделать может видео по этому, а то куча роликов хз что учить, сделал бы кто то вот верстаем сайты на гридах, а вот галерею фоток делаем с флоатом и тд , спасибо

[@prosto_razrabotka]

Нет такого понятия - устарело. Всему своё место. Флоат для обтекания картинок Грид для лейаутов (в основном) Флекс для выравнивания/позиционирования блоков

[@saharaprotocol]

Спасибо

[@pr0va1der]

Аве. Интересное видео, но такой вопрос. Замечал у тебя в видео разные сокращения в написании тегов и свойств. По типу div.class mt120 (чисто пример). До некоторых я сам допер используя логику. Есть ли ресурс где можно узнать все такие "сокращения"? Или может сделаешь видео на эту тему? Буду очень благодарен

[@prosto_razrabotka]

гугли - emmet cheat sheet

[@MrBblCTPEL]

Emmet - у него такой синтаксис,этот плагин поддерживается в практически во всех популярных редакторах. Соответственно, чтобы узнать весь его синтаксис, загуглите Emmet сокращения.

[@pr0va1der]

@@prosto_razrabotka как раз не знал как это гуглить (названия не знал). Спасибо

[@pr0va1der]

@@MrBblCTPEL тебе тоже спасибо

[@КонстантинШ-м2у]

Привет, надеюсь ты прочитаешь мой комментарий, очень хочу чтобы ты сделал урок по JS, очень сильно прошу сделай, сейчас очень много видео на эту тему, но видео выходило уже год два назад((( Или подскажи где учить, желательно русскоязычную книги или курсы, спасибо большое. ОЧЕНЬ НРАВИТСЯ ТВОЙ КАНАЛ. Только самый сок, нет не нужной информации

[@a.s2438]

молодец молодой человек

[@Александр-р4и2з]

Тупой вопрос по-моему, бутстрап(который написан на флексах) или флексы? А что если я выберу бутстрап мне флексы не нужно будет изучать? Если все классы в 4 бутстрапе флексовые)

[@Cinegami3]

спасибо за разъяснения

[@Ddddddddyu]

По моему мнению можно и не использовать bootstrap в одностраничных сайтах, потому что это создаёт лишнюю нагрузку на сайт. И поэтому лучше использовать чистый flexbox

[@ДмитрийПономарев-д1ю]

Нагрузка на одностраничных сайтах))

[@TortugaStudio]

Флекс это как гречка, которую ты сам приготовил из чистой крупы, лучка и грибов. В то время как бутстрап, это как кашка быстрого приготовления из Ашана, в которую производитель насыпал всякого говна и химии, и от чистой каши там разве что название, да фоточка на упаковке.

[@amirych]

Ну хз, использовать польностью фремворк не оч хорошая идея, а вот сетку можно. Но тоже зависит от дизайна, особенно если требования чтоб не ехал макет на всех разрешениях. Дизайн может быть кривой или "нестандартный". Я думаю лучше придерживаться каких-то общих правил и логическое, предсказуемое использование css(т.е. не так "Зачем тут float: right, да просто хотел элемент сдвинуть вправо"), а то будет мешанина из кастомных классов и классов сетки.

[@АлексейВолодин-у5ч]

Nice

[@abdaallahisaturkmanov4004]

Вы раньше один канал рекламировали ну или нам советовали можете сказать что за канал?

[@devZu9]

На мой взгляд совершенно неверно рассказано про "мастера". В 99% случаев мастер сначала учит CSS, а уже потом (для скорости) применяет Bootstrap. Поэтому когда он приходит и видит самописный CSS, то скорее всего он в нём так же быстро разберётся, как и в Bootstrap. Особенно сильно разница видна на маленьких проектах типа лендингов или сайтах визитках. Использовать на них тяжёлый Bootstrap смысла нет. А вот написать маленький CSS на флексах самое то.

[@AbraKadabra000]

Не согласен! Именно про сетку. Флексбокс одинаково хорошо документирован в интернете как и сетка бутстрапа. Если к вам на проект приходит человек который знает только бутстрап и не знает флексбокс, то я не завидую этому проекту). Поэтому лучше всегда использовать флексбокс, чтобы приходящие на проект разработчики не впадали в ступор)

[@mikalend8052]

Спасибо!)

[@-shakirov]

в общем на flexbox в React шаблонить и не париться

[@IgorBobyrev]

Вместо всего этого можно ведь было просто взять и просто ответить на вопрос в названии. Конкретно, по пунктам. Ведь можно было? И улыбочка в конце не раздражала бы

[@perseveranse]

Только наткнулся на канал, но не удивительно, золото сложно найти

[@whilefordo]

я понял что мне нужно поменять окна

[@ГеоргийЦветухин]

Ну, с реальными практическими примерами было бы понятнее)

[@Rakasovsky]

а почему идет сравнение с flexbox, а не grid?

[@prosto_razrabotka]

А почему должно идти с ним?

[@Rakasovsky]

@@prosto_razrabotka на мой взгляд он интуитивно понятней как в создании так и в редактировании своей сетки, в отличии от flexbox'a

[@prosto_razrabotka]

1. Под капотом у bootstrap - flexbox. Отчасти поэтому идёт сравнение у многих 2. Другая проблема. И по ней я сделаю тоже видео. Но если коротко - grid - двумерный, flexbox - одномерный. И многие не понимают, где что уместно

[@tiltman_]

@@prosto_razrabotka будете делать видео о том, где уместно использовать гриб, а где флекс?

[@ЯрославВавилин-й1ф]

крутое видео. ))

[@prosto_razrabotka]

Спасибо)

[@albionOnlineSchool]

Разные? Да ты сравнивал счетное множество с множеством на интервале (0,1)? уууу?

[@Артур-з4ь9е]

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

[@prosto_razrabotka]

Скорее уж у вас комментарий не корректный, если вы после просмотра такое пишете...

[@Артур-з4ь9е]

@@prosto_razrabotka я не смотрел. Наверное из-за того что название показалось странным.

[@anatoliyburdasov4035]

У меня такой Вам вопрос у Вас очки для зрения или для компьютера?

[@prosto_razrabotka]

Для стиля -)

[@anatoliyburdasov4035]

@@prosto_razrabotka Просто больше похожи для компьютера.Спасибо!

[@ПавелКовчин]

Что бы носить очки недостаточно быть умным нужно еще и плохо видеть... 😀

[@Vladikslavik]

Для автомобиля )))

[@КостяКреон]

Вопрос: ...можно ли использовать технологию CSS3 FlexBox в Bootstdrap?

[@АлександрИванов-п4и9ь]

ниче не понял, но очень интересно)

[@viktorlepp7702]

bootstrap 4 это сетка на flexbox :))))))

[@xxx2coder]

если смотреть на css-свойства, то да. смотрите шире

[@Unknown_User768]

А это правда что ты из Ибм?

[@prosto_razrabotka]

"Нет, сынок, это фантастика!" (с) из какой-то старой рекламы -)

[@Erudite.]

Я думаю лучше css grid layout 🤓

[@chikenmacnugget]

Интересно кто эти вопросы задаёт...

[@fmleglrmglrml]

Не знаю, зачем объяснять такие очевидные вещи, а когда выйдет новая сетка бутстрапа основанная ТОЛЬКО на гридах то придется видео перезаписывать? Это очевидные вещи, если человек верстал и на флексах и на бутстрапе он тупо не мог пройти информацию о том что бустрап сделан на флексах,это нереально ,а информация в видео очевидная, будто для годовалого ребенка разжевали...если человек не понимает в верстке таких очевидных вещей, то может все же это не его, может лучше чем то другим заняться?

[@prosto_razrabotka]

Если бы это было на столько очевидно, то эти вопросы бы периодически не всплывали в разных HTML / CSS чатах. А если говорить о "разжёванности", то если вы посмотрите другие мои видео, то заметите, что я везде всё пытаюсь объяснить простым языком, чтобы и годовалый ребёнок смог понять, разобраться и стать уже хорошим специалистом лет эдак через 10-15 -)

[@trustyvic]

Сравнение зачодное, но смысл ускользнул....

[@prosto_razrabotka]

Смысл где-то рядом

[@trustyvic]

@@prosto_razrabotka Ну да, да.... Смысл где то рядом, или рядом где то смысл....

[@АлексейБабыкин-ц5е]

Был бы я стекольщком я понял, а так нет

[@albertsaitov7463]

Изначально хотел наехать, но скажу по мягче. ХВАТИТ МУСОЛИТь ВЕРСТКУ!!! ГО ЖАЖУСКРИПТ!!!

[@OlekusGames]

Не понимаю зачем снимать ролик о Bootstrap который уже неактуален совсем

[@userUser-to5bx]

А что сейчас актуально?

[@OlekusGames]

Fok U флексы и гриды. Нет смысла юзать фреймворки, когда чистый CSS даёт богатые инструменты

[@prosto_razrabotka]

Видимо вы совсем не поняли второй части видео. Ничего, бывает.

[@rosumere]

Чёйта не актуален? Бутстраповская сетка на каждом ~третьем проекте.

[@fmleglrmglrml]

бутстрап сам по себе актуален был и будет, он ускоряет верстку что идеально подойдет для не сложных проектов,которые не претендуют на оригинальность, такие сайты как fanserials.market/ их полно, у них куча посетителей, но они друг на друга похожи очень ,меняются разве что раположение блоков да цвета , но этому бизнесу похеру на то что у тебя какой то элемент будет в другом месте стоять их интересует что они могут без проблем заливать свой контент и у них ничто никуда не вылезет случайно

[@siarheitkachou6006]

Как только я увидел это ШЭДЭВР бутстрап, его стили, написанные названием класса, мне прям плохо стало.. css и так простой, зачем его настолько упрощать? Для детей дегенератов что-ли, чтобы они считали себя программистами.

[@Jake-vorobei]

Бутсрап говно. Есть смысл сравнивать бутсрап и гриды+флексбоксы

[@ЕвгенийВоронков-ч2э]

6 минут прожито зря, хрень какую-то несёт

[@Ziercih]

Теперь все ясно,спасибо.