Flexbox - основы технологии и идеи удобной вёрстки по сетке

124549
108
2800
08.12.2016
Описание видео:

Основные идеи flexbox. Главная и вспомогательная оси Определение размера элементов: grow shrink basis. Выравнивания элементов. Изменение порядка элементов Адаптивка без media-запросов О вёрстке по сетке. Сетка на основе flexbox. Bootstrap vs Smartgrid. 🤍smartgrid.dmitrylavrik.ru/ Новый поток с 27 января 2017!

Кадры из видео
Flexbox - основы технологии и идеи удобной вёрстки по сетке
Flexbox - основы технологии и идеи удобной вёрстки по сетке
Flexbox - основы технологии и идеи удобной вёрстки по сетке
Flexbox - основы технологии и идеи удобной вёрстки по сетке
Тэги из видео
Комментарии пользователей:
Александр Котохомский
2022-05-04 20:17:09

Эйфория от флексбоксов закончилась в тот момент, когда во флекс-элементе без заданной высоты overflow-y:scroll не работает и этот элемент растёт куда не надо :)

Александр Котохомский
2022-05-02 13:11:14

Дмитрий, вы не только хорошо учите вёрстке, но и оставляете за собой большое наследие всем пытливым умам, за что вам огромная благодарность. Очень интересно смотреть и, главное, есть выхлоп :)

Yaroslav
2021-06-14 23:32:31

А шож так годно? !

Info-Bar
2021-04-08 07:38:24

Спасибо за материал. Очень полезно! И да, сколько уже можно мусолить этот Internet Explorer, в котором что-то там не поддерживается. Уже реально бесит. Корпоративные клиенты? Кто эти люди? Чем меньше поддерживать этот раритет тем скорее все это закончиться. Уже 20 лет я наблюдаю какие трудности в работе вызывает этот браузер, как для верстальщиков так и для дизайнеров. Постоянно надо было пихать костыли в этот долбаный Explorer. Для себя решил - все, хватит, забыл как кошмарный сон, что и вам рекомендую сделать. Сори, накипело ))

ExpertDog - Послушная собака за 15 минут в день
2021-01-22 10:04:56

Отличное видео! Я только начал изучать и очень пригодится. Возникла проблема -
На тайм коде hrFPD0nkRVA&t=26m26s 26:26
Только при работе на тренажере, у меня текст во втором блоке когда печатаю продолжает печататься дальше в строку и уходит под item3 а не переносится. Хотя выставляю все параметры как Дмитрий на видео.
Всем item - flex-grow: 1 || flex-shrink: 1 || flex-basis: 300px

У Parentbox - display: flex || text-align: inherit || flex-direction: row || flex-wrap: nowrap || justify-content: center || align-items: flex-start || align-content: stretch
Не пойму, что я делаю не так и где ошибка?
Или это глюк в тренажере? Один раз перенес строку, а потом опять в линию печатает.

Xzibit
2020-10-30 05:36:54

А как запомнить все значения флексов, про них есть документация?

Igor Ak
2020-02-19 05:38:57

Начало было интересное, конец - каша, вам предложат изучить фреймворк )))))))))))))))


Все как всегда, хотите "упростить" верстку, учите препроцессоры, настраивайте gulp...
учите учите учите, а на выходе все равно, тот же валидный css код, и при поддержке сайта написанный не вами все равно править css.
С выходом еммет, написать медиа запрос им сложно )))
То есть свои сайты пишем на разной новой хрени, чужие поддерживаем на css/html
Вместо того чтобы стандартизировать фронтенд, кулибины вносят просто хаос в индустрию.

SinGlE BW
2020-02-09 17:13:55

Пришёл с видоса Вёрстка по сетке на flexbox + интерактивный тренажёр где говориться что сетка flexbox норм))

noitaukkokronk
2019-12-21 08:01:47

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

Konstantin R
2019-10-30 18:36:07

Мне хоть и редко фронт нужен, но смотреть такие видеоуроки одно удовольствие!

Igor Lopatchin
2019-10-27 18:39:29

+

Яна Алексеева
2019-09-22 08:50:16

Спасибо! Я совсем-совсем новичок в вестке. Но понятней чем у Дмитрия, подачи материала еще не встречала.

Евгений Захаров
2019-08-28 19:47:58

Подозреваю, что мне люто повезло найти вас, Дмитрий, ещё до того как начал изучать вёрстку! Т.е. я совсем нуб, однако видео посмотрел и мне всё понятно, Спасибо Вам!

И, должен заметить, что у вас незаслуженно мало подписчиков(43к), ура такому контенту в ру-сегменте!

Andrey Manaenko
2019-07-16 09:25:16

Три года прошло, а пока это лучший материал по FlexBox

Zaur Hajiyev
2019-06-16 07:22:53

Очень хороший учитель и позитивный чел . Репект.

ynivermine
2019-05-03 08:25:11

спасибо очень круто )

Дима Коробченко
2019-02-28 23:43:09

Теска красавчек, объясняешь просто шикарно.

Dalmar Var
2019-02-07 16:40:59

Смотрел видео, на раслабоне. Мол и так все понятно. Начал верстать пробовать применить не клеится. Почитал несколько статей про тег и их свойства, пересмотрел кусочки видео еще раз и дошло. Спасибо Дмитрий за разъяснение тонкостей!

Роман Чирко
2019-01-18 08:53:17

простейший пример:
yadi.sk/i/DNEDoRfN9kkSog yadi.sk/i/DNEDoRfN9kkSog
как не бился но не смог флекбоксом вот так блоки расположить!

Что ищут прямо сейчас
kika edgar kogmaw FULL Rp jon bams CorelDRAW X6 MARCH udyr combo guide poner musica en discord info jambore nasional lag fix in frag pro Cemu настройка archeage 1.2 фантом гайд bdo fishing guide M1llionz drill bordo de xochiaca covid sun red build forza horizon 5 скачать мав'изалар nioh 2 dreaming demon syura badron ig
Похожие видео
22.10.2017
Уроки Bootstrap 4 - Работаем с Flexbox

Уроки Bootstrap 4 - Работаем с Flexbox

02.09.2020
✅ Верстка сайта с нуля для начинающих | HTML, CSS Flexbox & Grid, VS Code, Figma

✅ Верстка сайта с нуля для начинающих | HTML, CSS Flexbox & Grid, VS Code, Figma

19.10.2016
Bootstrap, flexbox, новая сетка - беседы об адаптивной вёрстке

Bootstrap, flexbox, новая сетка - беседы об адаптивной вёрстке

06.10.2021
Javascript: логика контекста против логики ООП

Javascript: логика контекста против логики ООП

03.09.2017
CSS Grid: Полное руководство

CSS Grid: Полное руководство

29.06.2016
Понимание javascript - работа с DOM

Понимание javascript - работа с DOM

04.02.2017
Основы программирования - алгоритмы, переменные, типы данных. Урок №3.

Основы программирования - алгоритмы, переменные, типы данных. Урок №3.

11.03.2017
Понимание javascript - замыкания, контекст, callback.

Понимание javascript - замыкания, контекст, callback.

20.07.2021
Основы техники гнутья, секреты резного орнамента. (2017)

Основы техники гнутья, секреты резного орнамента. (2017)

08.12.2016
Flexbox CSS In 20 Minutes

Flexbox CSS In 20 Minutes

03.11.2019
CSS Grid. Полный курс

CSS Grid. Полный курс

15.08.2016
Основы PHP - урок 4. Циклы и массивы. GET и POST.

Основы PHP - урок 4. Циклы и массивы. GET и POST.

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

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

19.01.2017
Основы и эволюция адаптивной вёрстки

Основы и эволюция адаптивной вёрстки

10.08.2016
Основы PHP - урок 2. Операции сравнения, логические операции, ветвления.

Основы PHP - урок 2. Операции сравнения, логические операции, ветвления.

15.12.2021
PHP ООП: внедрение зависимостей и магия рефлексии

PHP ООП: внедрение зависимостей и магия рефлексии

21.07.2018
Полный гайд по CSS Grid: адаптивная верстка за пару минут

Полный гайд по CSS Grid: адаптивная верстка за пару минут