Flexbox и Grid ⚡️ РЕАЛЬНЫЕ ПРИМЕРЫ, где МОЖНО и НЕЛЬЗЯ использовать CSS Flexbox и Grid

23151
87
1108
11.11.2021
Анна Блок

Анна Блок

5316327
75600
179
07.05.2015
RU
Описание видео:

Видео: В чем разница между Float, Flexbox и Grid CSS? - 🤍youtu.be/azQRYYdKt8I Пример 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 🔵 ВК — 🤍vk.com/tpverstak 🔵 Telegram — 🤍t.me/tpverstak 🔵 Чат Telegram — 🤍t.me/tpverstakchat 🔵 Instagram — 🤍🤍instagram.com/annblok/ 🔵 TikTok — 🤍🤍tiktok.com/🤍annblok_webdev 🔴 Задать вопрос — 🤍frontendhelp.me/ru 🔴 Обучение - 🤍frontendblok.com/

Кадры из видео
Flexbox и Grid ⚡️ РЕАЛЬНЫЕ ПРИМЕРЫ, где МОЖНО и НЕЛЬЗЯ использовать CSS Flexbox и Grid
Flexbox и Grid ⚡️ РЕАЛЬНЫЕ ПРИМЕРЫ, где МОЖНО и НЕЛЬЗЯ использовать CSS Flexbox и Grid
Flexbox и Grid ⚡️ РЕАЛЬНЫЕ ПРИМЕРЫ, где МОЖНО и НЕЛЬЗЯ использовать CSS Flexbox и Grid
Flexbox и Grid ⚡️ РЕАЛЬНЫЕ ПРИМЕРЫ, где МОЖНО и НЕЛЬЗЯ использовать CSS Flexbox и Grid
Тэги из видео
Комментарии пользователей:
Хороший друг
2022-09-08 20:52:39

Не показано, что будет с этими примерами, если врубить мобильную версию...

Mayhem
2022-08-17 19:10:50

Здравствуйте. Пример 1. Время KaDz7pxbzyw&t=5m50s 5:50 . Если бы меню надо было прижать ближе к правой кнопке "Login" как бы это сделали?

Roman Gargosow
2022-08-09 16:07:01

Не видео, а пушка!

Саня-успешный И KAWASAKI
2022-08-05 07:03:03

Умничка какая.

Tasha
2022-07-20 18:29:23

Спасибо, Анна. Понятно и наглядно

Мистер Твистер
2022-07-07 17:12:33

Анна, вы лучшая! Спасибо огромное за уроки.

Иван Петров
2022-07-06 11:09:33

Аня, ты такая красивая, прямо завораживающая ...

Nikolay Bondarenko
2022-06-18 01:48:34

капец, верстка с нулевых упростилась до жути. похоже скоро верстать будут машины

XapBu
2022-01-24 14:31:52

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

Павел Савончик
2022-01-09 11:30:29

Хорошее видео, спасибо за хорошее объяснение!

Dmitriy Movchan
2022-01-01 09:39:41

У gap во флексах еще плохая поддержка так что лучше его пока что не использовать.

Alex Lisouski
2021-12-23 20:51:03

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

Костянтин Терезюк
2021-11-26 09:34:36

Есть люди, кто проходил курс Типичный верстальщик JavaScript Мастер?

Александр Кирьянов
2021-11-20 04:40:41

Какая умная и симпатичная девушка!

Айдар I
2021-11-14 10:30:28

Не представляю как делать такие элементы не используя грид и флекс

Роман Багаев
2021-11-13 00:05:01

Анна, спасибо большое!! Классное видео!

Ivan Krashevskyi
2021-11-12 21:23:06

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

Евгений Штан
2021-11-12 21:03:13

20 минут литья воды, а вся суть только в последних 10 сек. Нужно было брать определенный пример и на нём показывать пример использования сначала flex, а потом как это же реализовать с помощью grid, и на основании этого делать вывод, что в какой ситуации лучше использовать. Ну это моё субъективное мнение, спасибо за труд, может кому-то было полезно.

RuperHS
2021-11-12 19:22:26

Лично для меня флекс всегда был проще в понимании, по этому работаю с ним чаще. но как было сказано в видео, сетка = грид , 1 ось = флекс... на флексе можно построить сетку не хуже чем с гридом, но и добавятся дивы в разметке. Вообще верстать нужно так как тебе удобней.

Что ищут прямо сейчас
snowrunner ev mod уроки SQL Skyrim Indonesia command cara mancing rangkaian ombyok english padna sikhe cara pinjam pulosa 3 blog voyage فورلان abdul somad Meizu M6 fpv buggy doa agar disukai balik oneodio headphones обзор blender procedural Bmw m5 браза на кодзи snack Video binding failed old friend xcloud xbox mod skin ff ob31
Похожие видео
21.03.2019
Позиционирование элементов: свойство position в CSS + разбор sticky

Позиционирование элементов: свойство position в CSS + разбор sticky

16.10.2018
В чем разница между Float, Flexbox и Grid CSS?

В чем разница между Float, Flexbox и Grid CSS?

21.01.2020
😳 Чем верстальщик отличается от фронтенд разработчика?

😳 Чем верстальщик отличается от фронтенд разработчика?

09.11.2020
Где использовать флексы, а где гриды? 🤨 Спойлер: да где хотите

Где использовать флексы, а где гриды? 🤨 Спойлер: да где хотите

13.04.2019
Единицы измерения CSS для padding, margin, height, width: px, %, em, rem, vw, vh, vmin, vmax

Единицы измерения CSS для padding, margin, height, width: px, %, em, rem, vw, vh, vmin, vmax

06.03.2020
Как правильно и быстро верстать любой сайт: 8 проверенных методов ускорения

Как правильно и быстро верстать любой сайт: 8 проверенных методов ускорения

29.04.2021
CSS Grid - самая понятная инструкция с примерами по гридам (сеткам) в CSS

CSS Grid - самая понятная инструкция с примерами по гридам (сеткам) в CSS

14.01.2022
Flexbox or grid - How to decide?

Flexbox or grid - How to decide?

23.10.2021
Сравнение PHP или Python 🔥 Что выбрать? Что учить новичку?

Сравнение PHP или Python 🔥 Что выбрать? Что учить новичку?

12.08.2019
ТОП 20 типичных ошибок верстальщиков при верстке сайтов

ТОП 20 типичных ошибок верстальщиков при верстке сайтов

18.04.2019
МЕТОДЫ ВЕРСТКИ САЙТОВ: Mobile First / Desktop First / CSS First

МЕТОДЫ ВЕРСТКИ САЙТОВ: Mobile First / Desktop First / CSS First

29.12.2020
Flexbox CSS практический курс за 6 минут. Все свойства

Flexbox CSS практический курс за 6 минут. Все свойства

26.08.2018
Верстка сайта по методологии БЭМ

Верстка сайта по методологии БЭМ

03.04.2019
Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmax

Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmax

03.08.2022
CSS Flexbox - Часть 1 - Основы, flex-direction, flex-wrap, order

CSS Flexbox - Часть 1 - Основы, flex-direction, flex-wrap, order

28.08.2021
CSS Grid, flexbox, float   в чем разница и как использовать  Практический пример

CSS Grid, flexbox, float в чем разница и как использовать Практический пример