CSS Flexbox. Полный курс
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 2024
- #YauhenK #webDev #CSS #Flexbox
В данном видеокурсе мы с вами рассмотрим технологию Flexbox.
Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально.
Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/cs...
✒ Timeline:
✔ 0:00 - Введение
✔ 2:39 - Основные понятия
✔ 8:12 - Направление осей
✔ 12:36 - Обёртка элементов и отступы
✔ 18:46 - Выравнивание вдоль главной оси
✔ 25:07 - Выравнивание вдоль поперечной оси
✔ 29:09 - Многострочное выравнивание
✔ 33:06 - Индивидуальное выравнивание элементов
✔ 37:36 - Размеры элементов
✔ 43:06 - Определение порядка элементов
✔ 48:00 - Вложенность. Обёртка элементов с размерами
✔ 53:29 - Практические примеры использования Flexbox
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ TH-cam: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Так же качественно как и твоя прическа. Мега-круто, отличный курс! Всё простым языком, большое спасибо)
😂🤣 спасибо 👍
Курс как всегда на высоте, такого основательного подхода ни у кого не встречала! Огромное спасибо и удачи во всех проектах!!!
Спасибо большое
Максимально простая подача, интересно и просто. Спасибо за труд этому гениальному автору. Помог разобраться с темой флексов! Лайк !
Спасибо за отзыв
Спасибо, особенно за последнюю часть, с примерами как это применить для разных вариантов!
Спасибо за отзыв!)
ура, ты объединил, стало удобнее) спасибо большое за образование! почет и уважение учителям)
Благодарю за отзыв
@@YauhenKavalchuk зачетный плейсхолдер))
Не совсем понял о чём речь)
Прям разжованно, хорошо объесняется, спасибо за Ваш труд☺
Спасибо за отзыв
Ты просто молодчина ) Как я рад что нашёл твой канал ! Очень доходчиво и наглядно объясняешь )
Спасибо большое)
Классный видос!
Очень доступно объясняете, спасибо большое!
Спасибо за отзыв
Спасибо, весь курс на одном дыхании.
Все максимально понятно
Бонус в конце курса с реальными примерами, идеально для закрепления!
Благодарю
Спасибо автору за Очень очень очень подробный и понятный ролик по флексам.
Подача материала просто огонь!!!
Все разложено по полочкам
Пожалуйста
Очень подробно, очень качественно, мега-профессионально! Пусть автору воздастся за его труд! ❤
Спасибо большое за отзыв
Просто лайк за свежий, топовый,понятный, полезный материал 👍👍👍👍
Спасибо
@@YauhenKavalchuk а курсы есть у тебя? На udemy или может ещё какой то платформе?
Нет, только TH-cam. Но если есть желание потратить немного денег, то можете стать спонсором, или патроном канала
Очень качественно и понятно 😌. Пожалуй подпишусь на этот прекрасный канал)
Спасибо)
Учусь в Синергии на фронтендера, никакого разъяснения материала. Простая зачитка текста. Долго искал что-то ,что помогло бы понять как и что. Ваши уроки помогли понять и разобраться во многом! Спасибо Вам огромное за ваш труд!!!
Спасибо за отзыв
и как там в синергии?)
@@stroke.1742 Как!?
Ничего не понятно)
лучшее чему может научить синергия - как быстро во время экзамена искать информацию в интернете
Если покупать, то лучше Яндекс Практикум или Нетология
Очень крутой контент. И круто что все вместе. Спасибо , друг, за такое доступное объяснение
Спасибо за отзыв
Спасибо за ваш труд, отличные уроки без воды и лишних слов.
Всегда пожалуйста
Женя, давно не был у Вас на канале. Крутой лук! Очень стильно))
Спасибо)
Отличный урок по флексам!
Спасибо большое!!!
Пожалуйста
Спасибо большое за ваш труд! Очень понятно объясняете, видно, что у вас педагогический талант. Прошла и закрепила flexbox, теперь перехожу к гридам
Спасибо большое за отзыв
Огромное спасибо! Очень чёткий и понятный курс, всё на ясных примерах и без лишний воды)
Огромное пожалуйста)
Спасибо, как раз на этом этапе изучения CSS
Пожалуйста
Отличный урок , идеально все , скорость подачи материала и объяснение!Спасибо за бесплатное образование!
Спасибо
Большое спасибо, очень подробно рассказано и показано. Куча примеров и море практики, автор молодец. Хотелось в будущем увидеть урок по Git и GitHub.
Спасибо за отзыв
Шикарный курс, шикарный канал, спасибо большое! Очень удобно обращаться по надобности к таким материалам.
Всегда пожалуйста
Спасибо вам за вдохновение и мотивацию!
Спасибо за отзыв
Как же грамотно, без спешки, аккуратно и точно передана информация. Спасибо! Проходила курс в приложении Mimo и в какой-то момент поняла, что не понимаю, о чем вообще речь. Пришла сюда навести порядок в голове, а тут такой контент. Обязательно прослушаю и другие курсы по CSS.
Спасибо большое за отзыв
Хорошее видео, с хорошими примерами, законспектировал, буду закреплять на практике. Большое спасибо!
Пожалуйста)
Очень качественно видео сделано, видно, что немало сил потрачено. Красавчик 👍
Спасибо за отзыв
Посмотрел первые 12 минут и уже лайк влепил. Ну реально НАГЛЯДНО всё показано и доступно объяснено
Спасибо
Самый лучший контент в сети, так это на этом канале! Благодаря ему, я понял много, до этого не понятных мне, вещей в программировании.
Спасибо большое автору!
Больше бы таких учителей!
Спасибо, спасибо, спасибо!!!!
Спасибо большое за отзыв
Благодарю в очередной раз за урок, который объяснён очень доходчиво. На мой взгляд, у Вас талант преподавания.
Спасибо большое за отзыв
@@YauhenKavalchuk Это Вам большое спасибо за Ваш труд!
Очень крутой курс! Благодаря постоянным пояснениями насчет оси наконец понял эту тему.
Огонь
Это супер радостно!)
👍
Спасибо, очень крутые лекции.
Пожалуйста
Спасибо за детальное объяснение такой непростой темы
Пожалуйста
Рад что нашёл твой канал, ты лучший !!!
Спасибо огромное за твой труд !!!
Спасибо большое за отзыв
спасибо за видеоуроки как теоретическая база перед решением практических задач очень полезно
Пожалуйста
Женя, большое спасибо тебе!
Пожалуйста)
просто чудесное повествование , максимально полезное видео, 5+++++++++++ тысячи лайков
Спасибо
Очень качественное видео. Благодарю.
Пожалуйста
Круто 🔥 спасибо большое
Пожалуйста
Видос имба по флексам, еще и с примером применения, пушка просто
Благодарю
Спасибо за бесценные уроки
Всегда пожалуйста
Крутой курс, клевая прическа! Спасибо )
Спасибо)))
Прохожу сейчас курсы у другого человека, но дополнительно полез разбираться в ютуб. Как говорится "Искал медь, а нашел золото!" Автор храни тебя господь за твои старания!!!!
Аналогично! Солидарен)
Спасибо большое за отзыв
Присоединяюсь и поддерживаю
Спасибо! Большой труд делать такие уроки
Пожалуйста
спасибо за урок Мастер!)Граммотный курс.
Спасибо за отзыв
Дружище, купил я курс у Яндекс Практикума значит) первая тема - флексбоксы. Я сначала у тебя смотрю, потом там делаю задания. От тебя куда больше инфы узнаю и в разы понятней. Спасибо тебе за твой труд :З
Спасибо большое за отзыв
Привет, как тебе курс? Хотел тоже купить, но отговорили знакомые
@@FrOsTBoLL Привет, дядя Ваня) Иди их поцелуй в лоб и поблагодари) Честно, я не советую. У меня диплом вот начался уже, да, я дошел почти до конца - это мини победа. Но сколько было боли, скулежа и страданий... Какие-то темы ок описание, но большая часть не очень, подают местами уже неактуальный материал, все эти дедлайны и непонятные ревьюверы больше вгоняют в апатию. Честно сказать, у меня почти все желание отпало заниматься разработкой, постараюсь добить диплом, но бог знает, как пойдёт. Посмотрим в сторону Хэкслета, но я не особо уверен, что там на голову выше будет. Да и плюс сейчас такое время, что хрен работу найдешь + ЯП не помогает с трудоустройством, то есть ты закончишь и будешь сидеть тупо в надежде, что тебя куда-то позовут. Крч, постараюсь закончить, но не уверен, что получится в современных реалиях что-то найти.
Важно качество контента, а не его реклама и раскрутка
Один из любимых каналов. Жаль, что ты не проводишь марафоны по верстке, было бы очень интересно.
Спасибо за отзыв
Спасибо большое за ваш труд
Спасибо за отзыв
Просто получилось суперски!!!!
В тетради конспекта на 3 листа (при маленьком подчерке)
Все подробно объясняют и показывают сразу на практике. Спасбио вам большое, получилось вообще замечательно!
Спасибо за отзыв
Спасибо тебе большое, реально понятно и доходчиво)
Пожалуйста
Супер крутое объяснение. Все что хотел узнать узнал. Ты молодец!
Спасибо
Крутой курс молодец!!!!!!
Спасибо
Очень приятный голос, все очень четко и понятно
Спасибо большое
Наверное самое лучшее видео по флексам которое я видела.
Спасибо большое за отзыв
Наконец-то я поняла эту тему! Огромное спасибо!
Огромное пожалуйста
Все СУПЕР 👍 😄 спасибо!!!!
Пожалуйста
Огромное спасибо.
Ты просто спаситель.
Самое лучшее объяснение для тех кто только начинает изучать вёрстку.
На остальных каналах несутся галопом по европам - подробно не разжовывая (типа сам догадается).
Спасибо ))
Пожалуйста
Спасибо Вам за ваш труд.
Пожалуйста
Большое спасибо, наконец-то понятно!
Пожалуйста
Знал данную технологию до этого курса, но хочу сказать это самый на мой взгляд педантичный и упорядоченный курс по флексам, отличный справочник. Соответственно Спасибо !
Спасибо большое за отзыв!)
@@YauhenKavalchuk Это вам спасибо! Есть много блогеров выпускающих подобные ролики, но вас отличает внимание к мелочам и деталям, что даёт более глубокое и полное понимание технологий, другие же стараются показать самое основное и ходовое, что с одной стороны тоже не плохо если хочешь только ознакомиться с технологией, но много нюансов выпадает. Ещё раз спасибо! Продолжайте в том же духе. Всех благ!!!
Спасибо
это очень полезный урок. Спасибо
Пожалуйста
Очень подробно, очень качественно
Спасибо за отзыв
Супер видео, все четко й понятно!
Хороший курс по флексбоксу, спасибо!
Пожалуйста
классный курс, спасибо большое!
Пожалуйста
Щербаков, как и я, доволен этим видео :) Спасибо!
А почему Щербаков доволен?)
th-cam.com/video/DSS8A9mq0tw/w-d-xo.html
А🤣🤣🤣🤣 не знал!)
Какой же ты крутой чел
Спасибо)
Спасибо, все чётко! 👍
Пожалуйста
Спасибо, очень хорошее видео.
Пожалуйста
Спасибо за труд❤
Спасибо за отзыв
огромная благодарность за эту нужную инфу (в самый нужный момент) и всё доходчиво подано.
мы как раз сейчас изучаем флексбох и преподаватель слишком быстро и слишком скомкано объясняет = зипирует инфу.
Рад что понравилось и что пригодилось во время
Скажите пожалуйста а где изучаете? с преподавателем
Сколько видео смотрел на Ютьюбе (не только по этой теме), у тебя самая лучшая подача. А не знаю, в чём рецепт успеха: может, голос как-то добродушно звучит, может, видеоряд удачно подобран, но конспект пишу исключительно по урокам WebDev'а. Увесистые видео по ХТМЛ и ЦСС - тоже. Спасибо за труд, короче.
Спасибо огромное за отзыв
Спасибо, это мега-контент 👍
Пожалуйста
Спасибо! Полезно очень)
Пожалуйста
Worked , thanks a lot!
You’re welcome
Спасибо большое, всё понятно объяснил.
Звучит, как сарказм из-за выделенного слова «КЭП»)
@@YauhenKavalchuk ни грамма сарказма, большие буквы - как знак уважения 👍
@@YauhenKavalchuk поменял, что б никого не смущало 😉
Брооо, спасибо, ты лучший)
Спасибо за отзыв
Чёткий урок!
Благодарю
Спасибо, ты лучший!
Пожалуйста
Спасибо! Пошел гриды учить)
Пожалуйста
Это чудесно
Благодарю
Дуже крута подача матеріалу! Дякую
калі ласка
Спасибо огромное!
Пожалуйста
Всегда лучшие разборы тем, рекомендую. Смотрите сначала это, потом, прыгайте на других. Евгений разжевывает в отличие от остальных авторов) 👍
Спасибо за отзыв
30:54 Для align-content : space-evenly точно так же распределяет элементы как и для justify-content: space-evenly :)
👍
Молодец ! С меня подписка!
👍
А мне понравилось ваше видео, было полезно
Отлично
Спасибо огромное!!!!!!!
Пожалуйста
огонь чувак=) теперь есть порядок в голове...
👍
спасибо за видео!!
Пожалуйста
Спасибо вам
Пожалуйста
Супер!
Спасибо
Огонь!
👍
17:40 - уточнение: у блочной модели горизонтальные margin тоже не схлопываются, только вертикальные. И, как мне кажется, стоило еще упомянуть особенности поведения margin: auto (или 0 auto, или auto 0), когда можно таким образом оттолкнуть элемент от других в противоположный конец контейнера и по вертикали, и по горизонтали.
Ну на счёт вертикально схлопывания, я полагаю люди, которые посмотрели курс по CSS об этом знаю. А вот на счёт margin: auto забыл
Доброе утро! А как можно расставить 4 одинаковых блока по 4 углам, чтобы они не меняли свое положение?
Благодарю!
Пожалуйста
За час узнал больше, чем за полгода в универе
👍
А по гридам курс который 4 года назад?)
Очень рад зайти на ютуб и увидеть свежий курс)
По гридам курс актуальный, там ничего не изменилось
Спасибо за отличный контент. Всё максимально понятно и доходчиво. Не хватает только описания поведения flex: none;
Спасибо за отзыв