Flexbox и Grid ⚡️ РЕАЛЬНЫЕ ПРИМЕРЫ, где МОЖНО и НЕЛЬЗЯ использовать CSS Flexbox и Grid
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- Видео: В чем разница между Float, Flexbox и Grid CSS? - • В чем разница между Fl...
Пример 1 - codepen.io/anna_blok/pen/WNEJXWz
Пример 2 - codepen.io/anna_blok/pen/xxLjWOQ
Пример 3 - codepen.io/anna_blok/pen/GRvdxEo
Пример 4 - codepen.io/anna_blok/pen/xxLjWMv
Пример 5 - codepen.io/anna_blok/pen/GRvGxNK
Пример 6 - codepen.io/anna_blok/pen/eYErMwx
👇 Тайм-коды:
00:00 Вступление
00:58 Бесплатный практикум по созданию сайтов
01:41 Разница между Float, Flexbox, Grid
02:41 Пример 1
06:18 Пример 2
10:10 Пример 3
11:41 Пример 4
13:52 Пример 5
16:23 Пример 6
19:20 Как сделать выбор между Flexbox и Grid
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
Ответ :
1) Сайт можно сверстать на одном flex.
2) Сайт можно сверстать на одном grid.
3) Сайт можно сверстать комбинируя flex и grid.
Вообще все упирается именно а адаптацию сайта. Вам его потом так или иначе надо будет адаптировать через запросы, и кто то говорит, что в этом плане grid является более лучшим вариантом, но я думаю ,что все относительно и крайне поверхностно. Решает в итоге "оператор", который либо создал отлично структурированный проект, либо "спагетти с тефтелями". Так что если вам нравиться flex - вперед. Нет ничего такого, что бы вы не сделали на flex так, как бы сделали на grid и наоборот.
Спасибо большое Анна ! Как раз давно искал информацию на эту тему , чтобы кратко и по делу !
Flexbox выбрали больше, потому что он старый и многие к нему привыкли и не отвыкли его использовать. Но если честно мне жаль, что используют Flexbox, а не Grid им гораздо легче справляться со всем чем возможно начиная с адаптивности до последней капельки однозначно Grid лидер и настоящий спаситель :)))
Да, лень имеет место быть, вместо того, чтобы подучить Grid
@@annblok_webdev да да иногда просто если видишь блок такой для флекса :))) просто делаешь им и не паришься.А так гридом можно делать каркасы сайтов, просто каркасы и если на фреймворк перебросить, спокойна разбиваешь на блоки и не нужно каждый див искать чей почему там!
@@annblok_webdev я щас хочу код скинуть про первую менюшку =)) сюда
@@annblok_webdev это css
*{
margin: 0;
padding: 0;
color: #fff;
box-sizing: border-box;
font-family: 'Roboto',sans-serif;
}a{
text-decoration: none;
}.grid{
width: 100%;
height: auto;
padding: 8px 10px;
background: #1c1c1c;
display: grid;
grid-template-columns: repeat(2,1fr);
align-items: center;
}.grid div{
display: grid;
grid-template-columns: repeat(3,1fr);
}
@media(max-width: 420px){
.grid{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}.grid a{
margin-bottom: 10px;
}
}
@media(max-width: 230px){
.grid div{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
просто flex добовляет динамичности где к примеру нужны блоки добавить в право либо в лево,а гридах строки можно так сделать=)),а колонки по трудится
Спасибо за видео. Я только начал учить вëрстку и как раз нужен был ответ на этот вопрос. Хотелось бы посмотреть на практический пример использования грид, для вëрстки лединга.
Огромное Вам спасибо, Анна! Как замечательно, что есть ВЫБОР для просмотра подобных фишек. Ведь специалистов много, грамотных специалистов - тоже много. Но у всех разный стиль преподнесения информации: кто-то в контент вплетает разные "шуточки" (они могут быть полезны в плане того, что эти моменты могут образовывать более устойчивые нейронные связки, но для кого-то очень серьезно "режут ухо", нанося различного рода вред ментальному организму), кто-то - "шуточки на грани...". Я сам по природе своего воспитания - достаточно некультурный. И именно ПОЭТОМУ (в целях перевоспитания) предпочитаю более культурный контент (у Анны это очень хорошо получается). Плюс: системная грамотность самой сути контента, плюс - грамотная речь. Огромное Вам, Анна, спасибо за контент! Успехов!
Отлично объяснение, спасибо за видео!
Огромное спасибо. Очень понятно и интересно)
Анна, вы лучшая! Спасибо огромное за уроки.
❤️
97% grid и 3% flex - строю сайты на coffee cms
Очень хороший урок, спасибо)
огромное спасибо за супер наглядное и понятное видео без воды!
Рада, что понравилось 😊🙌
Лично для меня флекс всегда был проще в понимании, по этому работаю с ним чаще. но как было сказано в видео, сетка = грид , 1 ось = флекс... на флексе можно построить сетку не хуже чем с гридом, но и добавятся дивы в разметке. Вообще верстать нужно так как тебе удобней.
спасибо за видео , все доступно, понятно
Анна, спасибо большое!! Классное видео!
Рада, что видео оказалось полезным ☺️
Спасибо, очень хорошие примеры
Огромное вам спасибо. Помогли, пол ночи голову ломал, как сделать. Посмотрел ваш ролик и стало ясно что и как сделать
Спасибо, Анна. Понятно и наглядно
❤️
5:48 Анна а почему для отступов gap: 10px; не используете?
Хорошее видео, спасибо за хорошее объяснение!
☺️
Здравствуйте. Пример 1. Время 5:50. Если бы меню надо было прижать ближе к правой кнопке "Login" как бы это сделали?
not bad, теория есть, нужно было узнать где что использовать. Теперь осталось только применить на практике) Thx, контент огонь
❤
Спрашиваете что выбрать flex box или grid?
Я бы выбрал Вас🌹❤️
Просто КРАСАВИЦА
Вечно бы учился бы у Вас, я прилежный и послушный ученик😇
Умничка какая.
Спасибо, очень полезная информация.
Не видео, а пушка!
Я бы не рекомендовал использовать gap в флексах. Потому что яблочники каких то там 10-х или 11-х версий не знают, что такое gap в флексе.
Ну как можно не поставить лайк. Еще бы, даже не знаю как сформулировать, стоит от вас ожидать видео сравнения фреймворков? - в русскоязычном сегменте ютуба практически нет таких видео (к слову сказать, в англоязычном есть топ подборки). Переходил от bootstrap на zurb foundation, теперь хочу попробовать что-то более легкое, типа tailwild (у вас хорошее есть видео), bulma, uikit, milligram и прочее. И ваше мнение, если не bootstrap и foundation, то что? Спасибо за канал!
У меня такого видео действительно пока нет, но есть обзор выбора фреймворков с точки зрения популярности вакансий - th-cam.com/video/o7Rwrx1uSv4/w-d-xo.html Но это не говорит напрямую о том, что тот или иной фреймворк плох, просто это одна из особенностей, которую стоит учитывать. Про CSS-фреймворки поняла 👍
а что лучше использовать, когда нужно сделать отступы между дочерними элементами (напр. вправо) , при этом чтобы это было кроссбраузерно, я очень часто делал margin-right и задавал также родителю отрицательное значение этого отступа, либо мудрил с nth-child, получается что gap решает эту проблему? p.s спасибо за ролик :)
хмм, посмотрел самостоятельно на can i use, 88% поддержки у gap
Да, gap решает. Можно добавить ещё @support для кроссбраузерности
Вопрос про курс "ПРОФЕССИЯ ВЕРСТАЛЬЩИК". Какова длительность курса, не особо понятно, толи 3 месяца, толи 12 месяцев?
Обучение длится 3 месяца
Очень полезно, спасибо за видео, Анна!) Но со звуком какая-то беда, очень тихо.
Рада, что видео оказалось полезным! 👍 Но уровень звука абсолютно тот же, что и на предыдущем видео)
@@annblok_webdev странно посравнению с другими видио действительно тише
бывают макеты где вообще ни грид ни флекс не поможет, только магия)
Можно пример таких макетов?)
в начале было заявлено что будут показаны случае когда нужно использовать флекс а когда грид, в итоге все примеры под флекс
свойство гэп для флекс имеет поддержку 90%, о чем тоже неплохо бы сказать
Похоже, вы не досмотрели видео. Примеры с Grid в видео есть.
@@annblok_webdev смотрел до конца, два последних примера я с тем же успехом сделаю их на флексах причем автоматом, просто потому что у флекса поддержка чуть лучше а выгоды от гридов на этих примерах я не вижу
классический пример для гридов когда один элемент в сетке занимает больше одной строки, его видимо и надо было показать
@@annblok_webdev если вдруг огорчаетесь от критических комментариев, то обычно мне все ваши видео нравятся)
@@eridiant «выгода» как минимум в том, что управлять колонками легче одной строкой в родительском блоке с Grid, если размеры колонок будут разными, без пропорций 1fr. Пример, где идёт захват в несколько строк, очевиден, поэтому и не был включён в подборку. Для сеток верное решение - Grid. Для однолинейных построений - Flexbox, чаще всего.
Не огорчаюсь. Это не критика. Просто показалось, что вы не досмотрели видео и сделали поспешные выводы.
Какая умная и симпатичная девушка!
Аня, ты такая красивая, прямо завораживающая ...
да начнется холивар))) согласен, назначение типов разметки определяет, как и в каком месте сайта будет конкретный тип или их связка
как раз только начал изучать grid, флексбокс уже немного знал
Правильно делаете, что учите оба свойства 👍 А то порой останавливаются только на Flexbox и все)
Для flexbox вместо margin можно использовать gap, поддерживается начиная с Safari 14.1, в Chrome и Firefox уже давно работает. Для grid поддержка gap ещё лучше.
// в видео про gap тоже говорится, но почему-то в начале используется margin
Ну вообще да flex привычнее однозначно , учитывая что некоторые свойства grid еще не стабильно поддерживаются )))
НО! Совмещать никто не мешал )))
Да и конечно некоторые вещи сделать удобнее на гридах)))
Что в вашем понимание "не стабильно"? Уровень поддержи свойств на уровне 94-96% по данным сайта Can I use.
@@annblok_webdev конечно , я не спорю ))) но я сейчас о том , что существуют отдельные компоненты , которые могут косо работать например в IE )))
Наверное не так выразился всё таки
на этот случай можно комбинировать с @support
@@annblok_webdev благодарю, за умную мысль )
Можно использовать для li не margin, а gap? Просто я его использую
Да, это современный метод
Почему в 1 примере margin, почему не использовать gap, содержащего ссылки для контейнера?
Когда это видео записывалась, у gap была слабая поддержка. Это сейчас можно его использовать везде.
Спасибо, но не затронули аспект, наличия/отсутствия контента
Ведь если во flex удалить элемент, то все подстооеься, а вот в grid, если удалить элемент, ьл может быть и нк очень, так как сетка.
И адаптация: вот здесь обычно вечный вопрос
А этот практикум актуален щас?
Не могу освоить Flexbox, да и профессиональную верстку в целом. Причина - нет понимания как, и почему именно так, ведут себя элементы в комбинации друг с другом (соседние, вложенные, на разных разрешениях экрана, перестраиваются и т.д.).
Грид освоил легко т.к. можно что угодно привязать к нужной области, ячейкам.
За 4 года освоил пару языков программирования и несколько технологий. И за эти 3 года каждый раз пытался и не мог понять Flexbox... Хотя курсы по нему идут около часа. Странно..
по другим к примеру делаешь вёрстку с лево на право, с верху в низ. А на гридах делаешь всё сразу :))) и все блоки готовы.Тоисть каркас под адаптив и на всё разом готово. Тебе остаётся верстать по блокам. Чем лучше особенно грид против всех? тем что используя фреймворки где есть компоненты и преходится бегать по файлам и в каждый заходишь не понятно, что воляется и что это за классы вообще это флекс или обычная вёрстка. на гридах ты разбиваешь на блоки и знаешь кто чей и в ком лежит :)))
Девочка очень умная.
Gridы имба, flex не отстаёт из-за своей простоты, надеюсь, что эти 2 технологии станут стандартом.
Не показано, что будет с этими примерами, если врубить мобильную версию...
@media подключаете и исправляете под моб.версию, как и на любом сайте
Расскажите нам пожалуйста в следующем видео про Биткоин. Спасибо.
Что, например?
@@annblok_webdev Возможно не правильно выразил свои мысли, но сейчас только ленивый не упоминает о Биткоин и все что с ним связано. Интересует аспект связанный именно с крипто пространством и как с этим коррелирует IT направление. Возможно вам известны какие либо примеры (что то типа blockchain developer) реализации проектов на основе технологии блокчейн. Ведь как минимум, в недалеком будущем (да и сейчас) это направление займет достойное место в IT разработке.
Да, все проще: использовать то, что упрощает верстку и вывод контента из бэкэнда.
У gap во флексах еще плохая поддержка так что лучше его пока что не использовать.
89% поддержки - плохо? Очень даже отличные показатели.
@@annblok_webdevну, думаю для сайтов на продакшен этого все еще малова-то ))
@@dmitriymovchan6563 если так думаете, то используйте ещё support в CSS
вот для первого могу такое сказать =)) по гридам. Щас покажу код
На самом деле тут всё можно реализовать и с Grid и с Flexbox ))
@@annblok_webdev конечно))) если веб разработчики увидят, как в андройде интерфейс делают 0о0 сразу бросят и пойдут туда.Но там это только начало страдании))
однозначно грид нужно сделать 100%
Не представляю как делать такие элементы не используя грид и флекс
А я наоборот
Барби нишо не слышно
Флэксбокс
всё на флексах делаю на изиче
В общем так почитал коменты хвалят грид, задача умники: имеется блок родитель контейнер, внутри например девять кнопок, или просто дивов, ширина каждого из дочерних дивов зависит от контента (текста) и разная само собой, как их построить гридом чтобы они спрыгивали когда не помещаются при этом без маржинов отступы сделать и так чтобы расстояния во всех рядах были одинаковые меж дочерними елементами? Ну явно сеточная, табличная, ячеечная структура не катит
Решают разные проблемы, считаю неуместным их сравнивать
Но тем не менее, новички часто задаются этим вопросом, поэтому и появилось это видео
и то что разработчики мои, мало встречаются гриды на сайтах :))) это потому - Либо создатель не знал о гридах, либо не умел на гридах, либо привык к тому что есть и сделал не на гридах и не на флексе, либо привык использовать флексбокс и лень перейти на грид и привык страдать на нём, либо только начинает использовать грид , а кто горазда умнее оказался начал использовать грид по всей красе :))).
20 минут литья воды, а вся суть только в последних 10 сек. Нужно было брать определенный пример и на нём показывать пример использования сначала flex, а потом как это же реализовать с помощью grid, и на основании этого делать вывод, что в какой ситуации лучше использовать. Ну это моё субъективное мнение, спасибо за труд, может кому-то было полезно.
Тогда это вообще бы было часовое видео)))) Значит всё-таки нет воды 😉
Лучше float
О
Есть люди, кто проходил курс Типичный верстальщик JavaScript Мастер?
От имени типичного верстальщика курсов не проводится)
@@annblok_webdev ну, от Анна Блок, хотел отзывы от людей услышать)
капец, верстка с нулевых упростилась до жути. похоже скоро верстать будут машины
Такие примеры - это уровень первого занятия по флексам. Разве сложно показать как решать флексами действительно нестандартную задачу? Никто не просит выкладывать целый курс, но пару примеров и решений можно было бы показать
Купи нормальный микрофон! Извини за крик души, но зачем издеваться над людьми?