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

Поділитися
Вставка
  • Опубліковано 6 вер 2024

КОМЕНТАРІ • 396

  • @Aleksandr1974-B
    @Aleksandr1974-B 2 роки тому +45

    Учусь в Синергии на фронтендера, никакого разъяснения материала. Простая зачитка текста. Долго искал что-то ,что помогло бы понять как и что. Ваши уроки помогли понять и разобраться во многом! Спасибо Вам огромное за ваш труд!!!

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +2

      Спасибо за отзыв

    • @stroke.1742
      @stroke.1742 2 роки тому +1

      и как там в синергии?)

    • @Aleksandr1974-B
      @Aleksandr1974-B 2 роки тому +2

      @@stroke.1742 Как!?
      Ничего не понятно)

    • @romkery
      @romkery 2 роки тому +2

      лучшее чему может научить синергия - как быстро во время экзамена искать информацию в интернете

    • @gospadinidinahui
      @gospadinidinahui 2 роки тому +1

      Если покупать, то лучше Яндекс Практикум или Нетология

  • @user-kn2rl5lg4x
    @user-kn2rl5lg4x Рік тому +9

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

    • @ArtyomKrymskiy
      @ArtyomKrymskiy Рік тому +1

      Аналогично! Солидарен)

    • @YauhenKavalchuk
      @YauhenKavalchuk  Рік тому +1

      Спасибо большое за отзыв

    • @user-pt1te3uh7f
      @user-pt1te3uh7f 7 місяців тому

      Присоединяюсь и поддерживаю

  • @NeedForHeavyMetal
    @NeedForHeavyMetal 2 роки тому +85

    ура, ты объединил, стало удобнее) спасибо большое за образование! почет и уважение учителям)

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +5

      Благодарю за отзыв

    • @NeedForHeavyMetal
      @NeedForHeavyMetal 2 роки тому +1

      @@YauhenKavalchuk зачетный плейсхолдер))

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +4

      Не совсем понял о чём речь)

  • @952a259
    @952a259 Рік тому +7

    Очень подробно, очень качественно, мега-профессионально! Пусть автору воздастся за его труд! ❤

  • @walkingdolphin9513
    @walkingdolphin9513 2 роки тому +3

    просто чудесное повествование , максимально полезное видео, 5+++++++++++ тысячи лайков

  • @user-qq3jv1ky8z
    @user-qq3jv1ky8z 7 місяців тому +4

    Спасибо за ваш труд, отличные уроки без воды и лишних слов.

  • @romaskhin
    @romaskhin 2 роки тому +15

    Просто лайк за свежий, топовый,понятный, полезный материал 👍👍👍👍

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +2

      Спасибо

    • @romaskhin
      @romaskhin 2 роки тому

      @@YauhenKavalchuk а курсы есть у тебя? На udemy или может ещё какой то платформе?

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +2

      Нет, только UA-cam. Но если есть желание потратить немного денег, то можете стать спонсором, или патроном канала

  • @MrDobro1214
    @MrDobro1214 2 роки тому +10

    Дружище, купил я курс у Яндекс Практикума значит) первая тема - флексбоксы. Я сначала у тебя смотрю, потом там делаю задания. От тебя куда больше инфы узнаю и в разы понятней. Спасибо тебе за твой труд :З

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +1

      Спасибо большое за отзыв

    • @FrOsTBoLL
      @FrOsTBoLL Рік тому +1

      Привет, как тебе курс? Хотел тоже купить, но отговорили знакомые

    • @MrDobro1214
      @MrDobro1214 Рік тому +1

      @@FrOsTBoLL Привет, дядя Ваня) Иди их поцелуй в лоб и поблагодари) Честно, я не советую. У меня диплом вот начался уже, да, я дошел почти до конца - это мини победа. Но сколько было боли, скулежа и страданий... Какие-то темы ок описание, но большая часть не очень, подают местами уже неактуальный материал, все эти дедлайны и непонятные ревьюверы больше вгоняют в апатию. Честно сказать, у меня почти все желание отпало заниматься разработкой, постараюсь добить диплом, но бог знает, как пойдёт. Посмотрим в сторону Хэкслета, но я не особо уверен, что там на голову выше будет. Да и плюс сейчас такое время, что хрен работу найдешь + ЯП не помогает с трудоустройством, то есть ты закончишь и будешь сидеть тупо в надежде, что тебя куда-то позовут. Крч, постараюсь закончить, но не уверен, что получится в современных реалиях что-то найти.

    • @user-pt1te3uh7f
      @user-pt1te3uh7f 7 місяців тому

      Важно качество контента, а не его реклама и раскрутка

  • @nuya2591
    @nuya2591 2 роки тому +4

    Какой же ты крутой чел

  • @digitalturkistan1857
    @digitalturkistan1857 Рік тому +1

    Спасибо за бесценные уроки

  • @user-tk7qv9rv2c
    @user-tk7qv9rv2c 2 роки тому +7

    Спасибо, особенно за последнюю часть, с примерами как это применить для разных вариантов!

  • @Egokiv
    @Egokiv 3 роки тому +4

    Женя, большое спасибо тебе!

  • @devorer77
    @devorer77 2 роки тому +8

    Женя, давно не был у Вас на канале. Крутой лук! Очень стильно))

  • @DEZester
    @DEZester 2 роки тому +19

    Так же качественно как и твоя прическа. Мега-круто, отличный курс! Всё простым языком, большое спасибо)

  • @user-ex4qq4yx1p
    @user-ex4qq4yx1p 11 місяців тому +3

    Очень крутой контент. И круто что все вместе. Спасибо , друг, за такое доступное объяснение

  • @dilyafruzik
    @dilyafruzik 2 роки тому +3

    Благодарю в очередной раз за урок, который объяснён очень доходчиво. На мой взгляд, у Вас талант преподавания.

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +1

      Спасибо большое за отзыв

    • @dilyafruzik
      @dilyafruzik 2 роки тому +1

      @@YauhenKavalchuk Это Вам большое спасибо за Ваш труд!

  • @Signtone
    @Signtone 3 роки тому +7

    Это супер радостно!)

  • @mykhailokorotych7531
    @mykhailokorotych7531 2 роки тому +5

    Спасибо, весь курс на одном дыхании.
    Все максимально понятно
    Бонус в конце курса с реальными примерами, идеально для закрепления!

  • @step7275
    @step7275 Місяць тому

    Спасибо за хороший курс смотрел его после основного курса что бы раскрыть полностью тему , очень много материала )

  • @ruslankhamidullin235
    @ruslankhamidullin235 2 роки тому +5

    Круто 🔥 спасибо большое

  • @VaBank3
    @VaBank3 Рік тому +1

    Посмотрел первые 12 минут и уже лайк влепил. Ну реально НАГЛЯДНО всё показано и доступно объяснено

  • @user-ig9ht6zl4w
    @user-ig9ht6zl4w 2 роки тому +22

    Максимально простая подача, интересно и просто. Спасибо за труд этому гениальному автору. Помог разобраться с темой флексов! Лайк !

  • @vladkomovich8585
    @vladkomovich8585 2 роки тому +5

    Классный видос!
    Очень доступно объясняете, спасибо большое!

  • @user-tr5vx7dp4s
    @user-tr5vx7dp4s 2 роки тому +5

    Спасибо автору за Очень очень очень подробный и понятный ролик по флексам.
    Подача материала просто огонь!!!
    Все разложено по полочкам

  • @atoomotr
    @atoomotr Рік тому +2

    Самый лучший контент в сети, так это на этом канале! Благодаря ему, я понял много, до этого не понятных мне, вещей в программировании.
    Спасибо большое автору!
    Больше бы таких учителей!
    Спасибо, спасибо, спасибо!!!!

  • @apelsin4ik2901
    @apelsin4ik2901 Рік тому +2

    Большое спасибо, очень подробно рассказано и показано. Куча примеров и море практики, автор молодец. Хотелось в будущем увидеть урок по Git и GitHub.

  • @alsusayfulina1865
    @alsusayfulina1865 2 роки тому +15

    Курс как всегда на высоте, такого основательного подхода ни у кого не встречала! Огромное спасибо и удачи во всех проектах!!!

  • @ilyabaraczenia1501
    @ilyabaraczenia1501 2 роки тому +5

    30:54 Для align-content : space-evenly точно так же распределяет элементы как и для justify-content: space-evenly :)

  • @bessuka
    @bessuka 2 роки тому +2

    Хорошее видео, с хорошими примерами, законспектировал, буду закреплять на практике. Большое спасибо!

  • @user-vn1ho3gu5b
    @user-vn1ho3gu5b 2 роки тому +4

    Крутой курс молодец!!!!!!

  • @Polite_person_
    @Polite_person_ 2 роки тому +2

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +1

      Спасибо большое за отзыв!)

    • @Polite_person_
      @Polite_person_ 2 роки тому +3

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +1

      Спасибо

  • @phoenixbeard8543
    @phoenixbeard8543 Рік тому

    Дуже крута подача матеріалу! Дякую

  • @user-nm3fk2ut4h
    @user-nm3fk2ut4h 7 місяців тому

    Очень приятный голос, все очень четко и понятно

  • @user-gq1gc2br9w
    @user-gq1gc2br9w 2 роки тому +2

    Спасибо, как раз на этом этапе изучения CSS

  • @user-nk2cx8mn5r
    @user-nk2cx8mn5r 2 роки тому +3

    Ты просто молодчина ) Как я рад что нашёл твой канал ! Очень доходчиво и наглядно объясняешь )

  • @TUMOREG
    @TUMOREG Рік тому +1

    Как же грамотно, без спешки, аккуратно и точно передана информация. Спасибо! Проходила курс в приложении Mimo и в какой-то момент поняла, что не понимаю, о чем вообще речь. Пришла сюда навести порядок в голове, а тут такой контент. Обязательно прослушаю и другие курсы по CSS.

  • @ulbolsynzh
    @ulbolsynzh 2 роки тому +6

    Прям разжованно, хорошо объесняется, спасибо за Ваш труд☺

  • @effeymoth6984
    @effeymoth6984 2 роки тому +1

    Большое спасибо, наконец-то понятно!

  • @zzicman
    @zzicman 5 місяців тому

    Спасибо за детальное объяснение такой непростой темы

  • @Peter-ir5fg
    @Peter-ir5fg 8 місяців тому

    это очень полезный урок. Спасибо

  • @egorios3705
    @egorios3705 2 роки тому +6

    Крутой курс, клевая прическа! Спасибо )

  • @bananchik3125
    @bananchik3125 Рік тому +1

    Очень качественно видео сделано, видно, что немало сил потрачено. Красавчик 👍

  • @almaz.kamaliev
    @almaz.kamaliev 2 роки тому +1

    Щербаков, как и я, доволен этим видео :) Спасибо!

  • @dizayn_eto_prosto
    @dizayn_eto_prosto 2 роки тому +1

    Спасибо большое за ваш труд

  • @dimeliora
    @dimeliora 2 роки тому +4

    17:40 - уточнение: у блочной модели горизонтальные margin тоже не схлопываются, только вертикальные. И, как мне кажется, стоило еще упомянуть особенности поведения margin: auto (или 0 auto, или auto 0), когда можно таким образом оттолкнуть элемент от других в противоположный конец контейнера и по вертикали, и по горизонтали.

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +3

      Ну на счёт вертикально схлопывания, я полагаю люди, которые посмотрели курс по CSS об этом знаю. А вот на счёт margin: auto забыл

    • @tanzilavodelova1306
      @tanzilavodelova1306 2 роки тому

      Доброе утро! А как можно расставить 4 одинаковых блока по 4 углам, чтобы они не меняли свое положение?

  • @ispanyola
    @ispanyola 2 роки тому

    Спасибо, очень понятно и доходчиво.
    Но столкнулся с проблемой на практике, надо было разобраться как именно считать пропорции у flex-grow. Пришлось погуглить знатно конечно. Так что оставлю решение здесь. Может кому пригодиться:
    Свободное пространство контейнера, без паддингов, границ и прочего делим на сумму значений flex-grow элементов. Т.е если у нас контейнер 1200px, и в нем 3 элемента по 150px, и второму надо дать значение flex-grow: 2; а остальным по единичке. То делаем так -
    (1200 - 150*3) / (1+2+1) = 187.5. Теперь, что бы узнать итоговый размер айтемов, умножаем это значение на значение flex-grow и прибавляем стартовый размер айтема. Для второга айтема это будет выглядеть так: (187.5 * 2) + 150 = 525px - итоговая ширина второго контейнера.
    Соответсвенно, для первого и третьего контейнеров - (187.5 * 1) + 150 = 337.5px.
    Пользуйтесь)

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому

      Спасибо, что поделились информацией

  • @Iron_Sea
    @Iron_Sea 2 роки тому +2

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +1

      Спасибо большое за отзыв

  • @ruslanhd7262
    @ruslanhd7262 2 роки тому +16

    Один из любимых каналов. Жаль, что ты не проводишь марафоны по верстке, было бы очень интересно.

  • @user-jf8ff1vy2i
    @user-jf8ff1vy2i 2 місяці тому

    Супер видео, все четко й понятно!

  • @usernamer519
    @usernamer519 11 місяців тому

    Очень крутой курс! Благодаря постоянным пояснениями насчет оси наконец понял эту тему.

  • @BubnovAndrew
    @BubnovAndrew 2 роки тому +3

    Это чудесно

  • @jakhonkhojakhon
    @jakhonkhojakhon 2 роки тому +2

    Отличный урок по флексам!
    Спасибо большое!!!

  • @mental_master9003
    @mental_master9003 Рік тому

    Огромное спасибо.
    Ты просто спаситель.
    Самое лучшее объяснение для тех кто только начинает изучать вёрстку.
    На остальных каналах несутся галопом по европам - подробно не разжовывая (типа сам догадается).
    Спасибо ))

  • @happyhour4067
    @happyhour4067 2 роки тому +1

    огромная благодарность за эту нужную инфу (в самый нужный момент) и всё доходчиво подано.
    мы как раз сейчас изучаем флексбох и преподаватель слишком быстро и слишком скомкано объясняет = зипирует инфу.

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +1

      Рад что понравилось и что пригодилось во время

    • @odeyalo9091
      @odeyalo9091 2 роки тому

      Скажите пожалуйста а где изучаете? с преподавателем

  • @user-hp2eg3zv1r
    @user-hp2eg3zv1r Рік тому

    За час узнал больше, чем за полгода в универе

  • @andranikhambardzumyan6264
    @andranikhambardzumyan6264 10 місяців тому

    Очень подробно, очень качественно

  • @nikukulkina
    @nikukulkina 2 роки тому +2

    Спасибо вам за вдохновение и мотивацию!

  • @Vitaliy42
    @Vitaliy42 10 місяців тому

    Шикарный курс, шикарный канал, спасибо большое! Очень удобно обращаться по надобности к таким материалам.

  • @user-cm1om1oo3p
    @user-cm1om1oo3p Рік тому

    Ох, доборый человек, спасибо тебе за видеоурок. дай бог тебе бабосиков.

  • @denysstryzhalko9265
    @denysstryzhalko9265 2 роки тому +4

    А по гридам курс который 4 года назад?)
    Очень рад зайти на ютуб и увидеть свежий курс)

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +3

      По гридам курс актуальный, там ничего не изменилось

  • @ilyafreer
    @ilyafreer 6 місяців тому

    Спасибо! Большой труд делать такие уроки

  • @901mg
    @901mg Рік тому

    Спасибо за отличный контент. Всё максимально понятно и доходчиво. Не хватает только описания поведения flex: none;

  • @uglykaneki5165
    @uglykaneki5165 2 роки тому

    спасибо за видеоуроки как теоретическая база перед решением практических задач очень полезно

  • @user-dd6ny4ig3y
    @user-dd6ny4ig3y 2 роки тому +4

    Очень качественно и понятно 😌. Пожалуй подпишусь на этот прекрасный канал)

  • @burunduckc
    @burunduckc Рік тому

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

  • @Olgitatata
    @Olgitatata Рік тому

    Все СУПЕР 👍 😄 спасибо!!!!

  • @nellivello2745
    @nellivello2745 2 роки тому

    Наверное самое лучшее видео по флексам которое я видела.

  • @mickle-ak
    @mickle-ak 6 місяців тому

    Занудный и душный контент.
    И это именно то, что нужно для изучения!!! 😉
    Я Ваши уроки СЛУШАЮ!!! когда еду или гуляю. И этого достаточно, чтобы понять! Вы все очень чётко проговариваете, так что все перед глазами на слух. Такое редко бывает!
    Здорово!
    Большое спасибо!
    P. S. Надеюсь я Вас не обидел первыми словами 😊

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 місяців тому

      Вроде и похвалили, а вроде и нет)

    • @mickle-ak
      @mickle-ak 6 місяців тому

      @@YauhenKavalchukПохвалил! Не сомневайтесь! 🙂

  • @901mg
    @901mg Рік тому

    Чтобы отцентровать элемент "Modal window" не обязательно задавать классу .flex-container свойства justify-content: center и align-items: center. Более элегантный способ - это установить элементу "Modal window" свойства margin: auto;

  • @mixm1572
    @mixm1572 2 роки тому +1

    Спасибо, очень крутые лекции.

  • @user-ek8ph7zy5h
    @user-ek8ph7zy5h 2 роки тому

    Видос имба по флексам, еще и с примером применения, пушка просто

  • @sergiy1992
    @sergiy1992 Рік тому

    Рад что нашёл твой канал, ты лучший !!!
    Спасибо огромное за твой труд !!!

  • @svet0v
    @svet0v 2 роки тому +2

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +2

      Возможно в следующем году

  • @bogdownoff
    @bogdownoff 2 роки тому

    Всегда лучшие разборы тем, рекомендую. Смотрите сначала это, потом, прыгайте на других. Евгений разжевывает в отличие от остальных авторов) 👍

  • @Toshik393
    @Toshik393 Рік тому

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

  • @user-go5tp4rd6w
    @user-go5tp4rd6w 9 місяців тому

    Спасибо, очень хорошее видео.

  • @rocketman4072
    @rocketman4072 Рік тому

    Спасибо большое, всё понятно объяснил.

    • @YauhenKavalchuk
      @YauhenKavalchuk  Рік тому

      Звучит, как сарказм из-за выделенного слова «КЭП»)

    • @rocketman4072
      @rocketman4072 Рік тому

      @@YauhenKavalchuk ни грамма сарказма, большие буквы - как знак уважения 👍

    • @rocketman4072
      @rocketman4072 Рік тому

      @@YauhenKavalchuk поменял, что б никого не смущало 😉

  • @sham_95
    @sham_95 Рік тому

    Спасибо, все чётко! 👍

  • @deGGenerate
    @deGGenerate 2 роки тому

    Супер крутое объяснение. Все что хотел узнать узнал. Ты молодец!

  • @demidronder
    @demidronder Рік тому

    Очень качественное видео. Благодарю.

  • @nikita_kabuu
    @nikita_kabuu 2 роки тому +1

    Спасибо тебе большое, реально понятно и доходчиво)

  • @difopse18
    @difopse18 2 роки тому

    Спасибо! Пошел гриды учить)

  • @user-gn1jl9sg8h
    @user-gn1jl9sg8h 11 місяців тому

    Это самое фундаментальное объяснение, я в шоке

  • @EugenySubbotin
    @EugenySubbotin 2 роки тому

    Чёткий урок!

  • @bbnowhat
    @bbnowhat 2 роки тому

    Брооо, спасибо, ты лучший)

  • @user-ve7tx3ud6n
    @user-ve7tx3ud6n 2 роки тому

    Спасибо Вам за ваш труд.

  • @roma_platonov_music
    @roma_platonov_music 2 роки тому

    Сколько видео смотрел на Ютьюбе (не только по этой теме), у тебя самая лучшая подача. А не знаю, в чём рецепт успеха: может, голос как-то добродушно звучит, может, видеоряд удачно подобран, но конспект пишу исключительно по урокам WebDev'а. Увесистые видео по ХТМЛ и ЦСС - тоже. Спасибо за труд, короче.

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому

      Спасибо огромное за отзыв

  • @School_Factory
    @School_Factory Рік тому

    Спасибо огромное!

  • @user-oi8sb5co3h
    @user-oi8sb5co3h 2 роки тому

    А мне понравилось ваше видео, было полезно

  • @natalliak74
    @natalliak74 2 роки тому

    Наконец-то я поняла эту тему! Огромное спасибо!

  • @snake_bs5500
    @snake_bs5500 10 місяців тому

    Спасибо вам

  • @quentindrenton
    @quentindrenton 4 місяці тому

    спасибо за видео!!

  • @orazaliorazali1000
    @orazaliorazali1000 10 місяців тому

    Благодарю!

  • @user-vo3ep1lr4e
    @user-vo3ep1lr4e 2 роки тому

    спасибо за урок Мастер!)Граммотный курс.

  • @velikorossnationalist4259
    @velikorossnationalist4259 2 роки тому

    Хороший курс по флексбоксу, спасибо!

  • @oloviddinazim2260
    @oloviddinazim2260 Рік тому

    Супер!

  • @armazet8081
    @armazet8081 Рік тому

    Спасибо за труд❤

  • @user-to2iu2rx6f
    @user-to2iu2rx6f Рік тому

    Огонь!

  • @artemkravchenko4062
    @artemkravchenko4062 2 роки тому

    классный курс, спасибо большое!

  • @user-yn8qv2kl2i
    @user-yn8qv2kl2i 2 роки тому

    Спасибо, это мега-контент 👍