Flexbox CSS практический курс за 6 минут. Все свойства
HTML-код
- Опубликовано: 28 дек 2020
- В этом курсе мы поработаем с flex box css и кратко рассмотрим все свойства! Flexbox, flex css уроки для начинающих
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Игра для закрепления знаний - flexboxfroggy.com/#ru
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469 
Наука
Смотреть тебя одно удовольствие, ни какой воды, все по делу. Не останавливайся!
Спасибо, стараюсь максимально без воды!)
@@UlbiTV допустим, у меня в контейнере два айтема, и мне нужно соотношение айтемов 40/60 процентов. Как быть в таком случае?
@@UlbiTV Только вот напсиано CSS,а все делаете в файле Html. Пытался подключить css с теми же свойствами ничего не работает увы(. Буду искать ответы дальше.
@@goloszakadrom793 Там он работает с использованием тега
@@goloszakadrom793 Есть несколько способов подключение стилей, два из них позволяют в html файле использовать стили, а третий, мне больше всего нравиться, отдельно от html
Такое четкое и конкретное изложение материала - очень больша редкость, респект!
Думал flex это что-то за гранью, а оказывается, такая простая вещь.
Спасибо большое что так просто и понятно объяснил😊😊
Вот это видео 100% летит в рабочий плейлист, чтобы быстро открывать подсказку при работе:))) спасибо, что порадовал к концу года ещё одним годным видео!!!
И тебе спасибо!)) Сегодня будет еще одно по grid
@@UlbiTV где тут смайлик потирания рук с ехидной улыбкой:)))) ждем-с:))))
@@ipa_stor 🤗🤗🤗🥳🥳🥳
24)😎
flex-direction:column-reverse;
flex-wrap:wrap-reverse;
align-content:space-between;
justify-content:center
😂😂😂😂
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! 👍
Автор не сказал что align self в flex работает только по второстепенной оси, в отличии от grid
Есть еще мелкие огрехи но в общем зачет. 👍
Flexbox CSS без воды, спасибо, очень круто!
Спасибо дружище!))
Огромное спасибо!.. Это было супер-скоро и супер-качественно!..🎉🎉🎉❤
Респект! Без понтов, без матов. Кратко и содержательно!
Спасибо большое! Ты реально годно, коротко и понятно объясняешь, продолжай пожалуйста!)
Спасибо.
Кратко, четко и ясно.
Просто шикарно! Теорию получил, на практике видос повторил, игрой закрепил и, получется, научисля использовать flex)
Огромное спасибо тебе!
Шикарно! Огромное спасибо автору!
лучше, что я смотрел про флекс. и теперь реально дошло!
Шикарное видео, так кракто и по делу я ещё не встречал объяснение Flex CSS. Спасибо просто классноЁ видео
Огромное спасибо за краткое, а главное понятное объяснение
Это видео прям на вес золота! Спасибо огромное!
очень хорошее видео. сначала прочитал теорию с примерами, понял все неполно. но после этого видео, понимание возросло
Тимур, кайф! Вот даже в лом коммент написать! После твоих уроков лепил проект на Реакте и пришло осознание, что стили у меня хромают)) решил подтянуть, посмотрев пару уроков. и вновь оказался у тебя и нашел, что надо! спасибо
Мало того что видео годное и показывает максимальную практику, так ещё и практическая игра, которая не надоест! Спасибо тебе за контент!!!
В процессе обучения случайно узнал о Flexbox. Смотрю видео, и мой мир переворачивается! Огромнейшее Спасибо!
Спасибо за краткость!!! Все четко!
Круто. Быстро и просто!
кратко и по сути, круто!
Это Божественно!
Спасибо огромное!!!
cпасибо, избавил от страданий!! ❤️
Самый самый крутой контент на свете !!!!🥳❤️
Спасибо, Эзам!)
Большое спасибо, добрый человек
Очень информативно и максимально информативно, за игру отдельное спасибо
Спасибо тебе, добр человек!)
Шикарно! Спасибо!!!
Хорошо и доступно!
подписался после первого видео. Это такой кайф потреблять контент, где 0% воды и 100% инфорамации
Бро, ты не перестаешь удивлять! Шикарно, ну впрочем как всегда ☺️💪
Спасибо бро!)
Очень круто, лайк, просто и понятно, для новичков)
Все четко и без мусора.
это самый лучший ролик по флексам, сразу все понятно
спасибо вам за суперполезный урок!
Выручил, спасибо!
Хороший урок. Спасибо
Огонь!
Быстро и чётко! Класс!
спасибо большое за этот видос , все четко и понятно
Отличная подача материала 0% воды
6 мин! Я пытался разобрать с ними 3 дня. Спасибо большое:3
Большое спасибо за разбор!
Супер, все по делу 👌
Супер, те що треба👍
Все так четка и понятно спасибо !
Присоединяюсь к предыдущим комментаторам. Спасибо огромное и успехов!
Спасибо огромаднейшее!!!!!!!!!
Вау! Как концентрированно и одновременно с этим подробно! Как же я устал смотреть часовые видосы про то, как в canvas нарисовать линию и тому подобное. Лайк и подписка!
Это лучшее видео,я столько пересмотрела ,и я знаю что говорю
Кратко и четко! Спасибо!
Спасибо, друг!)
Автор. флексы для меня не новость. Но у тебя одни из лучших видео.
Спасибо огромное!)
шикардятина- лайкос!
это коммент в поддержку)
Спасибо Гурген!)
Спасибо бро. Ты круто и чётко всё объяснил.
Таких людей мало, Ты избранный!
Здарова! Красава, всё кратинько и без лишней воды, а то один вообще эту тему на минут 40 сделал
Спасибо! Очень полезное видео для быстрого повторения!
Спасибо!) Хотел сделать что-то типо шпаргалки!
Спасибо, как всегда понятно и доходчиво)
Спасиб)
Краткость мать таланта. Спасибо за урок и за то что ценишь моё время.
сестра
@@leninzhiv6180 мать, сестра... да хоть прадедушка. суть не меняется, все в родственных связях. Все люди произошли от Адама и Евы, значит все люди родственники и грешники. Грешна конечная природа, ничто не поделать. Однако душа наша обладает бесконечной природой, она вечна, совершенна и безгрешна. Открой свою душу Богу, творцу своему, и транслируй его любовь через душу в сердце свое, в грешную суть свою, однако, беспрерывно связанную с совершенностью божию. Во веки веков, слава Богу Господу нашему, творцу всего видимого мира и невидимого, властителю всего и вся, дрожи перед мощью его, раб божий.
вот это лучшая обучалка, быстро и понятно
Лайк! Понятно и доступно, спасибо)
Спасибо!) Рад, что понятно и доступно, старался!)
Агонь!
Самое крутое видео!
Хорошее видео, спасибо!
Старался, спасибо!
Большое спасибо
Спасибо за разбор
Отличное объяснение, спасибо
Годно, спасибо большое
Спасибо было полезно
просто лучший 🏆
Спасибо за подробный обзор!
Благодарю за поддержку)
от души братан помог
So clear, so intrestig. Thaks a lot of❤
Благодарю! Отдельные благодарности за froggy =)
Комент в поддержку канала)
большое спасибо со второго курса программной инженерии:P
У тебя очень хорошо получается
.Ждем Grid.
Спасибо!) Завтра будет)
Спасибо! помог!
Подписка однозначно! Лучше и кратче объяснения я ещё не слышал, если можно подсказки в начале, в текстовом формате закиньте куда я думаю для всех было бы удобно сразу брать из файлика текстового примеры чем останавливать видео и печатать)
Мыслишь неправильно
Спасибо большое
Супер 🙌
круто👍🏼❤️🔥
Отличная шпаргалка))
будет куда глянуть что бы в гугле не искать
Если добавить тайм коды со свойствами - вообще кайф
Добавлю обязательно таймкоды, спасибо!)
я почти никогда не ставлю лайков, но автор заслужил и комментарий и лайк спасибо за познновательнный контент!
Какой же ты ахуенный, спасибо тебе, учу бэк, решил побырому понять что такое флексы. Твои видео идеально подошли под мои запросы.
просто красавчик
Спасибо.
Спасибо!
Хороший обзор функций
А благодарю , нормально нормально!
Ты - самый топ из всех!!! Подача материала - огонь!!!!!!!!!
Вооууу, какие слова)) спасибо дружище!!!!
Все четко без воды... введения и прочей Х....и которую тулят почти все блогеры!!!
You are amazing!
👍
Cпасибо!)
Прикольно, напомнило мне студийные шаблоны для Joomla, там тоже можно вставлять контент в подобные блоки на выбор, возможно та же технология
Ёлки-палки! Канал - бомба!😁 Случайно увидела видос о css и решила посмотреть, что есть ещё.. А ТУТТТТ ТАКОЕ😀 Я начинающая тупица, но мне прям зашло. Спасибо вам.
На канале много интересного, рекомендую!) спасибо!)