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

Поделиться
HTML-код
  • Опубликовано: 21 сен 2024

Комментарии • 396

  • @Aleksandr1974-B
    @Aleksandr1974-B 2 года назад +47

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

    • @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

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

  • @952a259
    @952a259 Год назад +7

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

  • @Максимда-л8ы
    @Максимда-л8ы Год назад +9

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

    • @ArtyomKrymskiy
      @ArtyomKrymskiy Год назад +1

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  Год назад +1

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

    • @user-pt1te3uh7f
      @user-pt1te3uh7f 8 месяцев назад

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

  • @NeedForHeavyMetal
    @NeedForHeavyMetal 3 года назад +84

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад +5

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

    • @NeedForHeavyMetal
      @NeedForHeavyMetal 3 года назад +1

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад +4

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

  • @МаратАбдурахманов-г9э
    @МаратАбдурахманов-г9э 8 месяцев назад +4

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

  • @romaskhin
    @romaskhin 3 года назад +15

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад +2

      Спасибо

    • @romaskhin
      @romaskhin 3 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад +2

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

  • @MrDobro1214
    @MrDobro1214 2 года назад +10

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад +1

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

    • @FrOsTBoLL
      @FrOsTBoLL Год назад +1

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

    • @MrDobro1214
      @MrDobro1214 Год назад +1

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

    • @user-pt1te3uh7f
      @user-pt1te3uh7f 8 месяцев назад

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

  • @step7275
    @step7275 Месяц назад

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

  • @РоманПарух-ю3й
    @РоманПарух-ю3й 11 месяцев назад +3

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

  • @dilyafruzik
    @dilyafruzik 2 года назад +3

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад +1

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

    • @dilyafruzik
      @dilyafruzik 2 года назад +1

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

  • @devorer77
    @devorer77 3 года назад +8

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

  • @ЯнаПронько-ы7ъ
    @ЯнаПронько-ы7ъ 2 года назад +7

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

  • @mykhailokorotych7531
    @mykhailokorotych7531 2 года назад +5

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

  • @atoomotr
    @atoomotr Год назад +2

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

  • @walkingdolphin9513
    @walkingdolphin9513 2 года назад +3

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

  • @КириллКолос-т2д
    @КириллКолос-т2д 2 года назад +22

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

  • @АльбертРубцов
    @АльбертРубцов 2 года назад +3

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

  • @DEZester
    @DEZester 2 года назад +19

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

  • @ЮлияКовалева-г9ш
    @ЮлияКовалева-г9ш 2 года назад +5

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

  • @apelsin4ik2901
    @apelsin4ik2901 Год назад +2

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

  • @vladkomovich8585
    @vladkomovich8585 2 года назад +5

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

  • @alsusayfulina1865
    @alsusayfulina1865 2 года назад +15

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

  • @VaBank3
    @VaBank3 Год назад +1

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

  • @Signtone
    @Signtone 3 года назад +7

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

  • @ulbolsynzh
    @ulbolsynzh 2 года назад +6

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

  • @ОюунаПапаева
    @ОюунаПапаева 7 месяцев назад

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

  • @Egokiv
    @Egokiv 3 года назад +4

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

  • @ruslankhamidullin235
    @ruslankhamidullin235 3 года назад +5

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

  • @nuya2591
    @nuya2591 3 года назад +4

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

  • @Polite_person_
    @Polite_person_ 2 года назад +2

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад +1

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

    • @Polite_person_
      @Polite_person_ 2 года назад +3

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад +1

      Спасибо

  • @digitalturkistan1857
    @digitalturkistan1857 Год назад +1

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

  • @bessuka
    @bessuka 2 года назад +2

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

  • @bananchik3125
    @bananchik3125 Год назад +1

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

  • @TUMOREG
    @TUMOREG 2 года назад +1

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад

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

  • @Iron_Sea
    @Iron_Sea 2 года назад +2

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад +1

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

  • @Vitaliy42
    @Vitaliy42 10 месяцев назад

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

  • @Амантур-т4ф
    @Амантур-т4ф 3 года назад +4

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

  • @phoenixbeard8543
    @phoenixbeard8543 Год назад

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

  • @Максим-г1ъ7п
    @Максим-г1ъ7п 3 года назад +2

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

  • @МаксимАртемьев-з2д
    @МаксимАртемьев-з2д 3 года назад +4

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

  • @mental_master9003
    @mental_master9003 Год назад

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

  • @egorios3705
    @egorios3705 3 года назад +6

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

  • @jakhonkhojakhon
    @jakhonkhojakhon 2 года назад +2

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

  • @Peter-ir5fg
    @Peter-ir5fg 8 месяцев назад

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

  • @zzicman
    @zzicman 6 месяцев назад

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

  • @АшурМезлан
    @АшурМезлан Год назад

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

  • @usernamer519
    @usernamer519 Год назад

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

  • @ЕленаПолищук-щ9ш
    @ЕленаПолищук-щ9ш 3 месяца назад

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

  • @ruslanhd7262
    @ruslanhd7262 3 года назад +16

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

  • @andranikhambardzumyan6264
    @andranikhambardzumyan6264 11 месяцев назад

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

  • @Olgitatata
    @Olgitatata Год назад

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

  • @almaz.kamaliev
    @almaz.kamaliev 3 года назад +1

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад

      А почему Щербаков доволен?)

    • @almaz.kamaliev
      @almaz.kamaliev 3 года назад +1

      ruclips.net/video/DSS8A9mq0tw/видео.html

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад

      А🤣🤣🤣🤣 не знал!)

  • @mickle-ak
    @mickle-ak 7 месяцев назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  7 месяцев назад

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

    • @mickle-ak
      @mickle-ak 7 месяцев назад

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

  • @Toshik393
    @Toshik393 Год назад

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

  • @nikukulkina
    @nikukulkina 2 года назад +2

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

  • @effeymoth6984
    @effeymoth6984 2 года назад +1

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

  • @sergiy1992
    @sergiy1992 Год назад

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

  • @burunduckc
    @burunduckc Год назад

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

  • @uglykaneki5165
    @uglykaneki5165 2 года назад

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

  • @nellivello2745
    @nellivello2745 2 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад

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

  • @ilyafreer
    @ilyafreer 7 месяцев назад

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

  • @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 года назад

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

  • @happyhour4067
    @happyhour4067 2 года назад +1

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад +1

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

    • @odeyalo9091
      @odeyalo9091 2 года назад

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

  • @dizayn_eto_prosto
    @dizayn_eto_prosto 2 года назад +1

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

  • @Александр-д8м9ъ
    @Александр-д8м9ъ 2 года назад

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

  • @bogdownoff
    @bogdownoff 2 года назад

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

  • @sham_95
    @sham_95 Год назад

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

  • @АлександрВасильевич-ч9з
    @АлександрВасильевич-ч9з 9 месяцев назад

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

  • @BubnovAndrew
    @BubnovAndrew 3 года назад +3

    Это чудесно

  • @901mg
    @901mg Год назад

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

  • @ilyabaraczenia1501
    @ilyabaraczenia1501 3 года назад +5

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

  • @rocketman4072
    @rocketman4072 Год назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  Год назад

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

    • @rocketman4072
      @rocketman4072 Год назад

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

    • @rocketman4072
      @rocketman4072 Год назад

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

  • @mixm1572
    @mixm1572 2 года назад +1

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

  • @АлександрКрайсветный-ф1н

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

  • @roma_platonov_music
    @roma_platonov_music 2 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад

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

  • @EugenySubbotin
    @EugenySubbotin 2 года назад

    Чёткий урок!

  • @deGGenerate
    @deGGenerate 2 года назад

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

  • @bbnowhat
    @bbnowhat 2 года назад

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

  • @difopse18
    @difopse18 2 года назад

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

  • @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 углам, чтобы они не меняли свое положение?

  • @demidronder
    @demidronder Год назад

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

  • @ЯнаВолкова-ь9г
    @ЯнаВолкова-ь9г 2 года назад

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

  • @nikita_kabuu
    @nikita_kabuu 2 года назад +1

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

  • @School_Factory
    @School_Factory Год назад

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

  • @quentindrenton
    @quentindrenton 4 месяца назад

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

  • @natalliak74
    @natalliak74 2 года назад

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

  • @oloviddinazim2260
    @oloviddinazim2260 Год назад

    Супер!

  • @ИгорьГлазков-с1б
    @ИгорьГлазков-с1б 2 года назад

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

  • @ДенисТураев-к5р
    @ДенисТураев-к5р Год назад

    Огонь!

  • @901mg
    @901mg Год назад

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

  • @айшаабду-м7ж
    @айшаабду-м7ж 2 года назад

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

  • @snake_bs5500
    @snake_bs5500 11 месяцев назад

    Спасибо вам

  • @ИззатТурсунов
    @ИззатТурсунов Год назад

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

  • @velikorossnationalist4259
    @velikorossnationalist4259 2 года назад

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

  • @orazaliorazali1000
    @orazaliorazali1000 11 месяцев назад

    Благодарю!

  • @MegapolisBrassBand
    @MegapolisBrassBand Месяц назад

    Открыл и подумал, что ошибся каналом. Это кто, где Евгений? А потом я понял, что это лихая смена стиля, весьма удачная!)

  • @denysstryzhalko9265
    @denysstryzhalko9265 3 года назад +4

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад +3

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

  • @armazet8081
    @armazet8081 Год назад

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

  • @immortal8538
    @immortal8538 Год назад

    Worked , thanks a lot!

  • @Мансур-б1ж5г
    @Мансур-б1ж5г 2 года назад

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