Flexbox CSS3 #1 — Знакомство с FlexBox

3767 ratings | 69063 views


Flexbox CSS3 #1 — Знакомство с FlexBox

Сегодня начинаем знакомиться с FlexBox. Мы узнаем, про его терминологию, кроссбраузерность, какие свойства CSS в нем не работают, и маленькие нюансы по обработке внешних отступов (margin). Ссылки из урока: 1. Ссылка на архив FlexBox: 2. Ссылка на видеокурс по Brackets (2.20): Автор видеокурса – Сергей Михалевич. Плейлист Flexbox CSS: Смотрите курс Bootstrap : Не ограничивай себя видеоуроками на YouTube! Узнавайте еще больше полезной информации! Общайтесь с опытными разработчиками, преподавателями и развивайся через личное общение! Telegram: Slack: Наш сайт: Instagram: ВКонтакте: facebook: twitter: ----------------------------------------------------------------------------------- Не забываем, что самый лучший способ сказать спасибо - нажать кнопку нравится и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)

Comments to the video: Flexbox CSS3 #1 — Знакомство с FlexBox

MaGu x 1 month ago
Отлично. Лайк/подписка. Ппж, потом флекса, посмотрю еще что там у тебя увлекательного на канале. Хороших мыслях для тебя и их воплощения
Валентин Куриленко 3 months ago
Классные обучалки! Спасибо!
Василий Петров 3 months ago
Видео - класс!! А все те, кто гласит, что здесь немало воды либо создатель картавит - идите в жопу! Смотрите ивангая либо долбоеба вроде сахара, хули вы здесь запамятовали?
Earthly man 3 months ago
Вот вам для закрепления! в топ!
Юлия Эдуардовна 3 months ago
Спасибо за Ваши уроки) мое знакомство с FlexBox началось конкретно с их)) я сейчас не боюсь подвигаться далее.начин положено) однако мне бы хотелось, что бы уроки были изготовлены в виде теория-практика, то кушать, поначалу слайд со свойством, его описание, значения, рисунки какие-то схематичные, а позже уже практику показываете. Просто, этак понятнее ,что ли) а этак, уроки примечательные, еще один благодарю)
Abdulaziz Baiyrbek 4 months ago
глас от искусник сиесес
Vopros Vopros 5 months ago
Ебать ты картавый
Олег Сухих 5 months ago
Большое благодарю за серию уроков про флексбоксы. Действительно, пять! Нечего и добавить:)
Natalie Gats 5 months ago
красава авт
Абрамович Павел 6 months ago
Доходчиво и понятно. Спасибо!
Елена Толочко 6 months ago
бомбезно и любопытно! этак содержать)
Денис Мадин 6 months ago
Серррёга Ты наилучший!
Сергей Храпин 7 months ago
margin: auto - это вообщем супер! Чтобы достигнуть такового эффекта без флексов, необходимо было душу дьяволу реализовать)
Alex Bel 4 months ago
Нет, далековато не этак. Есть еще два метода: одинешенек с эмуляцией поведения ячейки таблицы, иной без )
Aleksejs Marčena 8 months ago
Классно. Спасибо!
Ольга Щербакова 9 months ago
благодарю за задание!
RySiK 2x 9 months ago
Ребят здраствуйте, смотрю ваши видосы весьма полезные, продолжайте в том же духе, у меня проблема, Флекс Бокс это подмена медиа запросов либо они в комплексе должны трудиться?
Alex Unknown 9 months ago
блеа будто же бесит твой глас..РРРРРРРРРРРРРРРРРРРРРРРЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
Андрей FFF 9 months ago
Сергей, огромное благодарю, хорошие материалы и красивая подача.
Rasul Nezamov 9 months ago
Прекрасно!
John Wick 10 months ago
ценно, круто. однако мля. что этак кортаво нах?! аж простивно
Max Raven 9 months ago
Ты уродец
Alex Krivenko 1 year ago
Чем inline-flex принципно отличается от flex с flex-flow: row wrap; то реально осознать не могу.
Никита Гусев 1 year ago
Ррррррррррррр
Эдуард Викторович 1 year ago
Поставлю лайк за буковку Р. Очень забавно глядеть на все это дело
Lena Di 1 year ago
одинешенек из наилучших туториалов про флэксы! Пересматриваю любой один будто необходимо освежить познания, обыкновенно на забугорных видео лучше объясняют однако этот плейлист исключение! Автору благодарю!
loftblog 1 year ago
Спасибо)
Александр Хома 1 year ago
Блин, это то что я этак длительно находил
loftblog 1 year ago
Отлично) Рады, что наши уроки полезны )
John Doe 1 year ago
хватило на 30 секунд аплбомба этого долбоеба. конечно ну-ка нахуй - лучше английский гайд почитаю со словарем.
Валерий Назаров 1 year ago
Спасибо!!! Посмотрел все 6 видео уроков, все весьма наглядно и понятно стало!
Станислав Кащеев 1 year ago
А будто быть с IE 8 и IE9?
Vitaliy aka Lops 1 year ago
+Станислав Кащеев полифил
Марина Трошина 1 year ago
Тому, кто вызнал про flex преждевременное - может быть там и вода, а новеньким, которые лишь слышали про flex, однако не работали - это превосходный задание. Огромное благодарю!
CyberGenius777 1 year ago
дьявол, а я лишь на данный момент об этой фиче вызнал)
Jenya Space 2 years ago
напишите хаки для старенькых Сафари, ато полавинка функций флекса там не работает((
Фыва Олдж 2 years ago
Не работает в android 4.1. Как не пробовал, не сумел вынудить трудиться правильно. Андроид 4.1 ещё весьма у многих, потому использовать flexbox на практике покамест спозаранку. Может кто знает какие-или хаки, хотя бы с внедрением js?
Никита Андрианов 2 years ago
отчего webkit с 2-мя значениями? -webkit-flex и -weblit-box
Alex Bel 4 months ago
В видео же разъясняется все. Пересмотреть можешь.
سيف بدر 2 years ago
استغفر الله 2 years ago
من الاردن
Владимир Ребров 2 years ago
иешка резануло очень не взаимосочетание, а схлопывание box - это контейнер, а не блок не хватает вступления, что-то типа: таблицы, float,flexbox. Суть - рассчитано на самый исходный степень, в связи с чем и разжевано соответствующе. Хотя для чего им флексбокс?:)
Voronko Славик 2 years ago
Залогинился чтобы лайкнуть.
Alpamys Moldashev 2 years ago
Интересное дело
Albek Zhitvaev 2 years ago
поправочка, если margin не заезжаезжает на иной margin, означает он не складывается.з.ы. а вообщем увлекательное видео вышло))
Мир звука 2 years ago
Взимосочетание margin принято именовать схлапыванием, если не ошибаюсь. Ещё: схлапывание срабатаывает лишь для верхних и нижних margin, однако вовек для боковых.Только не задумайтесь: попросту пробую быть полезным.
Мир звука 2 years ago
+elena shaforostova Да, благодарю. :)
elena shaforostova 2 years ago
+Мир звука СхлОпывание же.
Master-CSS 2 years ago
Спасибо за ваш комментарий. Он весьма ценен для нас. Непременно учтем все ваши пожелания )))
Pavel Yakovlev 2 years ago
+Master-CSS рекомендую выучить базы css перед тем будто вписывать уроки
Мир звука 2 years ago
+Master-CSS конечно, последнее тоже правильно. Верстальщику весьма принципиально осознавать всякие-такие тонкости на самом деле. А вот вы чем занимаетесь? Чем хлеб получаете? :)
Мир звука 2 years ago
Так ведь в том же хроме всё без префиксов работает. Зачем добавили?
Master-CSS 2 years ago
+Мир звука поэтому что в более старенькых версиях хрома без префиксов не работает.
hazratgs 2 years ago
ОЧЕНЬ ПЛОХО, весьма немало воды.
Den4023 2 years ago
Классно! Просьба еще все таки поведать о хаке к ие 9. Свойство чувствую будет любимое, однако заявка к верстке ie9+ уберут не быстро(
Alex Bel 4 months ago
На флоатах, к примеру, задать всем блокам схожую высоту не выйдет. Флоаты в данном случае задаются для того, чтоб в браузерах, в которых отсутствует помощь флексбоксов, макет не разваливался. Будет деградация, это конечно, однако колонки останутся на собственных местах.
questions answer 1 year ago
А для чего тогда флексбоксы если в итоге снова клепать на флоатах все)
Master-CSS 2 years ago
А ларчик то попросту раскрывался :)
Gatilin Maxim 2 years ago
Не нужно этак мастерить ради бога. Прописывайте флоаты совместно с флексбоксом. Дело в том, что флексбокс убирает флоаты и в итоге флоаты применятся лишь там где дудки поддержки флексов
Master-CSS 2 years ago
Да все попросту: <!--[if IE 9]>   переписываешь стили на флоаты :) <![endif]-->
Posa Mosa 2 years ago
Что за плагин, какой расставляет полосы при вложенности?)
Posa Mosa 2 years ago
+Master-CSS Спасибо вам за ваш труд,и поддержка :)
Master-CSS 2 years ago
Indent Guides вроде. Вот:
Денис Малиночкин 2 years ago
Я не понимаю, будто можно не устанавливать пробел перед фигурной скобкой. Я бы на месте селектора попросту ушел бы из кода.
Сергей Андреевич 1 year ago
+Денис Малиночкин В sublime автоматом добавляется пробел
Master-CSS 2 years ago
Я надеюсь, ваше любимое блюдо - курица в духовке, а то я не понимаю, будто можно по другому существовать. Я бы на месте курицы - вылез из духовки )))
San Litvin 2 years ago
оч. любопытно, продолжай.с каждой технологией верстать все проще
Денис Богданов 2 years ago
В целом отлично и понятно. Но весьма затянуто. Было бы отлично перед тем будто выложить видео его подчистить от излишних слов и неправильных действий. Спасибо.
roman italian 2 years ago
Нормуль.
Master-CSS 2 years ago
Денис, записываю, будто выходит. Стараюсь все разъяснить тщательно, что бы хоть какой сообразил. В этом уроке 1-ые 3 минутки пришлось подавать техно информацию. В последующем уроке уже будет все по теме.
Adrian Lazarov 2 years ago
еще еще ещее!!!
Master-CSS 2 years ago
завтра выложим новое
Виталий Есипов 2 years ago
Все пять, однако картавость малость напрягает! А по теме все будто нужно!
Master-CSS 2 years ago
С этим кушать неувязка. Согласен. Но здесь уж ничего не поделаешь.
Vitun RMHouse 2 years ago
Спасибо. Отлично. Полезно.
Михаил Новиков 2 years ago
Друг, эти видео точно наберут больше 50, даже больше 10к я уверен наберут, Инфы по flexbox'ам не достаточно в нете, этак что пиши. Благодарю
Abdulaziz Baiyrbek 4 months ago
извини однако ссылка не работает
FactoREAL 2 years ago
во первых - мой комент был не к твоему видео, а к коменту другого человека. я это писал больше для него, чем для создателя видео. Я  до него пробовал донести идея, что лучше прочесть ту статью, чем глядеть это видео. всё это, естественно же мое личное мировоззрение. во вторых> - я не согласен с тем, что у тебя выходит и это твоё. конкретно потому мой коментарий и был написан. ИМХО печатная статья полезнее чем этот видео-задание. в третьих - возьму на себя храбрость представить, что я чуть-чуть (совершенно капельку) больше разбираюсь в теме, чем те люд, которым нравятся эти уроки и которые не лицезреют тут воды. может быть из за неопытности они еще не способны это узреть, они воспринимают всякую информацию за верную. можешь находить что у меня ЧСВ зашкаливает, твое право. однако я только вижу что материал средней полезности, кушать лучше, и я поделился своим воззрением.  в итоге - все эти косяки с водой и дикцией это не обида тебя лично, а констатация фактов. и тупо ратифицировать что материал с косяками лучше, чем без их. а в этот момент кушать материал лучше чем твой. этак для чего же обучаться по более нехорошему источнику, если кушать лучше ? кому-то больше по душе видео-задание, а кто-то глядит его, лишь поэтому что покамест что не отыскали более неплохой ключ. вот для второго типа людей я и пишу эти коменты (может и напрасно. хз.). по поводу того, что я лишь критикую в коментах могу произнести последующее: мне не любопытно строчить миллионный комент ваааау. супер (которые имхо лучше поменять на клик по кнопке like). таких коментариев и без меня хватает. мне больше любопытно обсудить (либо покритиковать) и вторую сторону медали, пускай и в таковой оскорбительной манере. 
Master-CSS 2 years ago
Холивары? Насмешки? Ты свои комменты почитай дружок, там не считая этого, ничего больше и дудки. Ты смысла то не поймал. *Я не хохотал над тобой*, когда предложил записать свое. И уж точно бы не унижал тебя, когда бы его поглядел. Просто попробуй и усвоишь, что это сходу не дается. Опять же, маму мою сюда приплел, школьную программку, абзацы с картинами, к чему все это?? Ты еще деда с бабкой моих припиши :) *Ладно человек, если не возражаешь, давай перейдем на более конструктивный беседа.* Ты пишешь, что нужно мастерить видео надлежащие - это будто?? Я делаю этак, будто мне нравится, и я в их стараюсь все очень разъяснить. У меня это выходит, *это мое*. Ты же мне предлагаешь зачитать пару абзацев из той статьи??? *В чем тогда будет резон моих занятий?* Я отлично вижу по реакции аудитории нравятся ей мои видео либо дудки. Большинству по душе, я не рассусоливаю и не лью воды, объясняю чисто по теме, этак, что бы даже новенький сообразил. Кому то это будто водой, ну-ка и пускай, за то мне и многим другим это будто полезной информацией. Странно, истина? А со временем я научусь еще лучше мастерить. Над дикцией я на данный момент работаю более чем усиленно. С буковкой РРРР бьюсь с юношества. Раньше ужаснее было намного. Но это не означает, что мне невозможно вписывать видео. Наоборот, если бы я по жизни слушал таких критиков будто ты, в том числе и неких учителей - того что у меня кушать, я бы не достигнул. *Как по другому выучиться что-то мастерить без практики???*
FactoREAL 2 years ago
+Master-CSS я неужели произнес что я смогу сделать лучше ? мне это не необходимо, попросту если люд берутся мастерить что-то, то нужно  и мастерить соответствующе. А с таким подходом проблема о нужности такового материала встает достаточно обоснованно, а не с издевкой , будто это сделал ты. это вообщем тема для холиваров - что лучше, книжка либо видео-задание. в данном случае от статьи (на которую я кинул ссылку) полезности еще больше чем от этого видео (издержал 12 минут жизни и вызнал чуток больше чем ничего). если не способен осилить пару абзацев текста (даже на российском и с картинами) то не понимаю будто ты вообщем оказался в теме flex'a ? а у тебя вообщем все сводится к записи конкретно видео (будто единственного правильного вариант подачи материала), думается мне, что ты из тех, кому сочинения в школе мать писала, а школьную программку ты всю в коротком изложении читал (либо не читал совсем), даже ссылку для тебя необходимо сбросить в видео формате.
Михаил Шварц ispaniagid ru 2 years ago
Спасибо! Все попросту и понятно