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

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

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

  • @ЯрославХодосов-д2н
    @ЯрославХодосов-д2н 4 года назад +151

    Смотреть тебя одно удовольствие, ни какой воды, все по делу. Не останавливайся!

    • @UlbiTV
      @UlbiTV  4 года назад +5

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

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

      @@UlbiTV допустим, у меня в контейнере два айтема, и мне нужно соотношение айтемов 40/60 процентов. Как быть в таком случае?

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

      @@UlbiTV Только вот напсиано CSS,а все делаете в файле Html. Пытался подключить css с теми же свойствами ничего не работает увы(. Буду искать ответы дальше.

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

      @@goloszakadrom793 Там он работает с использованием тега

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

      @@goloszakadrom793 Есть несколько способов подключение стилей, два из них позволяют в html файле использовать стили, а третий, мне больше всего нравиться, отдельно от html

  • @ipa_stor
    @ipa_stor 4 года назад +40

    Вот это видео 100% летит в рабочий плейлист, чтобы быстро открывать подсказку при работе:))) спасибо, что порадовал к концу года ещё одним годным видео!!!

    • @UlbiTV
      @UlbiTV  4 года назад +1

      И тебе спасибо!)) Сегодня будет еще одно по grid

    • @ipa_stor
      @ipa_stor 4 года назад +1

      @@UlbiTV где тут смайлик потирания рук с ехидной улыбкой:)))) ждем-с:))))

    • @UlbiTV
      @UlbiTV  4 года назад

      @@ipa_stor 🤗🤗🤗🥳🥳🥳

  • @Алексей-г7ь5ы
    @Алексей-г7ь5ы Год назад +14

    Такое четкое и конкретное изложение материала - очень больша редкость, респект!

  • @DiIov
    @DiIov 2 года назад +35

    0:15 что такое flexbox
    0:40 оси в flexbox
    0:50 основные свойства flexbox
    1:07 показывает код
    1:17 display: flex;
    1:25 flex-direction: column(-reverse)/row(-reverse);
    1:45 order: n; (порядок элементов)
    2:08 выравнивание в контейнере
    По главной оси: justify-content: center/flex-end/flex-start/space-between/space-around;
    По второстепенной оси: align-items: center/flex-end/flex-start/
    3:25 выравнивание отдельного элемента:
    align-self: center/flex-end/flex-start;
    3:57 flex-wrap: wrap; (автоматический перенос не вмещающихся элементов.)
    4:19 flex-basis: x; (размер относительно главной оси)
    5:09 flex-shrink: x; скорость изменения размеров элемента при изменении размеров окна;
    5:33 flex-grow: x; размер элемента;
    5:55 слайд со свойствами.
    PS Невероятное сочетание краткости и ясности! Thanks! 👍

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

      Автор не сказал что align self в flex работает только по второстепенной оси, в отличии от grid
      Есть еще мелкие огрехи но в общем зачет. 👍

    • @monacci
      @monacci 5 месяцев назад

      @@vladdd2164 так align это и есть выравнивание по второстепенной оси

  • @zakassan
    @zakassan Год назад +7

    Думал flex это что-то за гранью, а оказывается, такая простая вещь.
    Спасибо большое что так просто и понятно объяснил😊😊

  • @denisshupenko1370
    @denisshupenko1370 4 года назад +16

    Flexbox CSS без воды, спасибо, очень круто!

    • @UlbiTV
      @UlbiTV  4 года назад

      Спасибо дружище!))

  • @AnderPython-tw3kp
    @AnderPython-tw3kp Год назад +1

    В процессе обучения случайно узнал о Flexbox. Смотрю видео, и мой мир переворачивается! Огромнейшее Спасибо!

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

    24)😎
    flex-direction:column-reverse;
    flex-wrap:wrap-reverse;
    align-content:space-between;
    justify-content:center

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

    подписался после первого видео. Это такой кайф потреблять контент, где 0% воды и 100% инфорамации

  • @BAS-64
    @BAS-64 3 года назад +7

    Краткость мать таланта. Спасибо за урок и за то что ценишь моё время.

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

      сестра

    • @epsilon.sw_
      @epsilon.sw_ Год назад

      @@leninzhiv6180 мать, сестра... да хоть прадедушка. суть не меняется, все в родственных связях. Все люди произошли от Адама и Евы, значит все люди родственники и грешники. Грешна конечная природа, ничто не поделать. Однако душа наша обладает бесконечной природой, она вечна, совершенна и безгрешна. Открой свою душу Богу, творцу своему, и транслируй его любовь через душу в сердце свое, в грешную суть свою, однако, беспрерывно связанную с совершенностью божию. Во веки веков, слава Богу Господу нашему, творцу всего видимого мира и невидимого, властителю всего и вся, дрожи перед мощью его, раб божий.

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

    спасибо тебе добрый человек! Я уже всю голову сломала с тонной инфы, а тут все наглядно просто быстро и понятно

  • @Yrysceldi
    @Yrysceldi 19 дней назад

    вот это объяснения 😮 объяснил прям четко еще на пол экрена показываал как работает коды вообще круто обьяснил сразу подписка и лайк плюс коммент для продвижения ❤

  • @srt2046
    @srt2046 4 года назад +17

    Бро, ты не перестаешь удивлять! Шикарно, ну впрочем как всегда ☺️💪

    • @UlbiTV
      @UlbiTV  4 года назад +1

      Спасибо бро!)

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

    Таких людей мало, Ты избранный!

  • @romandev-cx8so
    @romandev-cx8so Год назад

    Респект! Без понтов, без матов. Кратко и содержательно!

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

    Просто шикарно! Теорию получил, на практике видос повторил, игрой закрепил и, получется, научисля использовать flex)
    Огромное спасибо тебе!

  • @ЭзамАппаева
    @ЭзамАппаева 4 года назад +12

    Самый самый крутой контент на свете !!!!🥳❤️

    • @UlbiTV
      @UlbiTV  4 года назад

      Спасибо, Эзам!)

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

    Шикарное видео, так кракто и по делу я ещё не встречал объяснение Flex CSS. Спасибо просто классноЁ видео

  • @ТимСлим
    @ТимСлим 4 года назад +5

    Кратко и четко! Спасибо!

    • @UlbiTV
      @UlbiTV  4 года назад +1

      Спасибо, друг!)

  • @tamuna1209
    @tamuna1209 Год назад +4

    Огромное спасибо!.. Это было супер-скоро и супер-качественно!..🎉🎉🎉❤

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

    Подписка однозначно! Лучше и кратче объяснения я ещё не слышал, если можно подсказки в начале, в текстовом формате закиньте куда я думаю для всех было бы удобно сразу брать из файлика текстового примеры чем останавливать видео и печатать)

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

      Мыслишь неправильно

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

    Здарова! Красава, всё кратинько и без лишней воды, а то один вообще эту тему на минут 40 сделал

  • @АлексейЛоскутников-ю4р

    Спасибо! Очень полезное видео для быстрого повторения!

    • @UlbiTV
      @UlbiTV  4 года назад

      Спасибо!) Хотел сделать что-то типо шпаргалки!

  • @Unnamed-r8x
    @Unnamed-r8x 4 года назад +2

    Автор. флексы для меня не новость. Но у тебя одни из лучших видео.

    • @UlbiTV
      @UlbiTV  4 года назад

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

  • @RocketC0de
    @RocketC0de 3 месяца назад

    "Не будем много говорить - сразу к делу", тупо сразу лайк влепил

  • @ФедорКарпенко-ы4г

    Присоединяюсь к предыдущим комментаторам. Спасибо огромное и успехов!

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

    очень хорошее видео. сначала прочитал теорию с примерами, понял все неполно. но после этого видео, понимание возросло

  • @СергейМошко-я6б
    @СергейМошко-я6б 8 месяцев назад

    лучше, что я смотрел про флекс. и теперь реально дошло!

  • @АлександрНикольский-н3г

    Ты - самый топ из всех!!! Подача материала - огонь!!!!!!!!!

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

      Вооууу, какие слова)) спасибо дружище!!!!

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

    Отличная подача материала 0% воды

  • @js3461
    @js3461 4 года назад +6

    Лайк! Понятно и доступно, спасибо)

    • @UlbiTV
      @UlbiTV  4 года назад

      Спасибо!) Рад, что понятно и доступно, старался!)

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

    6 мин! Я пытался разобрать с ними 3 дня. Спасибо большое:3

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

    Тимур, кайф! Вот даже в лом коммент написать! После твоих уроков лепил проект на Реакте и пришло осознание, что стили у меня хромают)) решил подтянуть, посмотрев пару уроков. и вновь оказался у тебя и нашел, что надо! спасибо

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

    Мало того что видео годное и показывает максимальную практику, так ещё и практическая игра, которая не надоест! Спасибо тебе за контент!!!

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

    Спасибо большое! Ты реально годно, коротко и понятно объясняешь, продолжай пожалуйста!)

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

    Какой же ты ахуенный, спасибо тебе, учу бэк, решил побырому понять что такое флексы. Твои видео идеально подошли под мои запросы.

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

    Вау! Как концентрированно и одновременно с этим подробно! Как же я устал смотреть часовые видосы про то, как в canvas нарисовать линию и тому подобное. Лайк и подписка!

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

    Спасибо, как всегда понятно и доходчиво)

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

      Спасиб)

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

    кратко и по сути, круто!

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

    Очень круто, лайк, просто и понятно, для новичков)

  • @Thomas-gd7if
    @Thomas-gd7if 4 года назад +5

    Отличная шпаргалка))
    будет куда глянуть что бы в гугле не искать
    Если добавить тайм коды со свойствами - вообще кайф

    • @UlbiTV
      @UlbiTV  4 года назад

      Добавлю обязательно таймкоды, спасибо!)

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

    это самый лучший ролик по флексам, сразу все понятно

  • @neckalas5759
    @neckalas5759 4 года назад +5

    У тебя очень хорошо получается
    .Ждем Grid.

    • @UlbiTV
      @UlbiTV  4 года назад +2

      Спасибо!) Завтра будет)

  • @Theonelasthero
    @Theonelasthero 4 года назад +5

    Хорошее видео, спасибо!

    • @UlbiTV
      @UlbiTV  4 года назад

      Старался, спасибо!

  • @Леонид-с5з
    @Леонид-с5з 2 года назад

    4:18 flex-basis
    5:08 flex-shrink

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

    Ёлки-палки! Канал - бомба!😁 Случайно увидела видос о css и решила посмотреть, что есть ещё.. А ТУТТТТ ТАКОЕ😀 Я начинающая тупица, но мне прям зашло. Спасибо вам.

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

      На канале много интересного, рекомендую!) спасибо!)

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

    Около суток не мог решить проблему, но после просмотра этого шедевра, на меня взошла благодать и я все пофиксил. Спасибо😘

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

    Спасибо за подробный обзор!

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

      Благодарю за поддержку)

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

    cпасибо, избавил от страданий!! ❤️

  • @БибигульКошерова
    @БибигульКошерова 3 года назад +1

    Спасибо.
    Кратко, четко и ясно.

  • @Faradenza-sb3mj
    @Faradenza-sb3mj Год назад

    я почти никогда не ставлю лайков, но автор заслужил и комментарий и лайк спасибо за познновательнный контент!

  • @Rusificator
    @Rusificator 2 месяца назад

    Краткость - это талант

  • @IvanKuznecov-n6v
    @IvanKuznecov-n6v 3 года назад

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

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

    Это видео прям на вес золота! Спасибо огромное!

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

    Все четко без воды... введения и прочей Х....и которую тулят почти все блогеры!!!

  • @DrGurgen
    @DrGurgen 4 года назад +8

    это коммент в поддержку)

    • @UlbiTV
      @UlbiTV  4 года назад

      Спасибо Гурген!)

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

    Огромное спасибо за краткое, а главное понятное объяснение

  • @Artem-u5e9c
    @Artem-u5e9c 9 месяцев назад

    Шикарно! Огромное спасибо автору!

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

    вот это лучшая обучалка, быстро и понятно

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

    Все четко и без мусора.

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

    Спасибо за краткость!!! Все четко!

  • @GarageCreativity
    @GarageCreativity 10 месяцев назад +1

    Спасибо за полезный урок! Искал flex-wrap: wrap;

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

    шикардятина- лайкос!

  • @АлександрКулик-м7я
    @АлександрКулик-м7я 3 года назад +1

    Круто. Быстро и просто!

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

    Комент в поддержку канала)

  • @ОленаКороль-ш5п
    @ОленаКороль-ш5п 2 года назад

    Быстро и чётко! Класс!

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

    большое спасибо со второго курса программной инженерии:P

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

    Большое спасибо, добрый человек

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

    Спасибо тебе, добр человек!)

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

    Огонь!

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

    спасибо вам за суперполезный урок!

  • @blurredbg8820
    @blurredbg8820 8 месяцев назад +1

    Спасибо за разбор

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

    Ставлю лейкоцит за то что в данный момент и сам учу))Спасибо мужик)

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

      Спасибо бро)

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

    Спасибо бро. Ты круто и чётко всё объяснил.

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

    Выручил, спасибо!

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

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

  • @Olena-eq1ou
    @Olena-eq1ou 7 месяцев назад +1

    Благодарю

  • @МаратГончаров-ю7э

    спасибо большое за этот видос , все четко и понятно

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

    Супер, все по делу 👌

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

    от души братан помог

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

    Это Божественно!

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

    Хороший урок. Спасибо

  • @Антон-в6и4и
    @Антон-в6и4и 2 года назад

    Супер, те що треба👍

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

    Неужели я нашёл ответы на все мои вопросы)

  • @ragnnna2416
    @ragnnna2416 4 года назад +4

    Хотелось бы увидеть видео по vuejs с typescript. А так спасибо за понятный и короткий видос!

    • @UlbiTV
      @UlbiTV  4 года назад +1

      Спасибо за отзыв, да, до тайпскрипта точно доберемся в новом году!)

  • @ZuraevD
    @ZuraevD 2 месяца назад

    ответ на 24-е flexfrog
    flex-flow: wrap-reverse column-reverse;
    align-items: flex-end;
    justify-content: center;
    align-content: space-between;

  • @daunman
    @daunman 22 дня назад

    Мужик, ты лучший

  • @ОльгаСух-р7к
    @ОльгаСух-р7к 3 года назад +1

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

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

    Агонь!
    Самое крутое видео!

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

    Хорошо и доступно!

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

    Прикольно, напомнило мне студийные шаблоны для Joomla, там тоже можно вставлять контент в подобные блоки на выбор, возможно та же технология

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

    Пушка!

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

    Все так четка и понятно спасибо !

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

    Отличное объяснение, спасибо

  • @КаренМартиросян-т2ш

    Большое спасибо за разбор!

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

    просто лучший 🏆

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

    Шикарно! Спасибо!!!

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

    очень крутое видео, красавец👍

  • @AmirLT-x6y
    @AmirLT-x6y Год назад

    So clear, so intrestig. Thaks a lot of❤

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

    Спасибо было полезно