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

4616 ratings | 93127 views


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

Пройди БЕСПЛАТНО профориентацию в IT - Сегодня начинаем знакомиться с FlexBox. Мы узнаем, про его терминологию, кроссбраузерность, какие свойства CSS в нем не работают, и маленькие нюансы по обработке внешних отступов (margin). Ссылки из урока: 1. Ссылка на архив FlexBox: 2. Ссылка на видеокурс по Brackets (2.20): Автор видеокурса – Сергей Михалевич. Плейлист Flexbox CSS: Смотрите курс Bootstrap : Школа онлайн-образования: Telegram: Slack: Сайт: Instagram: Группа вконтакте: Facebook: Twitter: Больше уроков от lofblog: loftblog Все уроки по хештегу: loftblogFlexbox Полезные уроки для веб-программиста: вебпрограммист Flexbox Поставь лайк - смотивируй автора писать еще :)

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

MIchael Kogan 1 month ago
Мне посодействовал Flexbox Defense
Aleksys CIMR 3 months ago
Спасибо за работу ! Народу нужно ещё и побольше по флексу ! этак что приз в студию !
لاإله إلا الله رب العالمين 4 months ago
ال Flexbox::: هي تقنيه جديدة تجعل من السهل تصميم هيكل متجاوب responsive. ولها عدة خصائص ولل item التي بداخلها خصائص ايضا خاصه بها. بسيطه جدا :- ال خصائص للflexbox : 1/ flex-direction : column او column-reverse ; يطبع بشكل عمود او بالعكس او القيمه الثانيه flex-direction : row او row-reverse بشكل صف او صف معكوس 2/ flex-wrap :wrap او nowrap اي بالتفاف او بدون التفاف لل item. 3/ flex-flow وهي اختصار لقيم الخاصيتين السابقة. الخصائص الباقيه 4و5و6 خاصه بالموقع والترتيب. 4/ justify-content : القيم التي تاخذها كالتالي a. center; توسيط b. flex-start; سحب للبدايه c. flex-end; سحب للنهايه d. space-between; فراغات الموجودة تقسم بالتساوي بين العناصر فقط اما جهه الجدار تكون ملاصقه وبدون فراغ. e. space-around; المسافه الموجودة تقسم بالتساوي بسن العناصر من الجهتين يسار ويمين. 5/ align-items: هي خاصيه لضبط موقع وتموضع العناصر داخل اطار فليكس بوكس بشكل عمودي فقط ولها عدة قيم: a. center توسيط b. flex-start في البدايه c. flex-end في النهايه d. streach تمدد طولي e. baseline على خط واحد مهما اختلفت احجام العناصر. 6/ align-content: هذي الخاصيه نفس الخاصيه رقم اربعه justify-content غير انها معنيه بمحاذاة المسافه بين السطور الجديدة المتولدة عند التفاف العناصر بسبب صغر حجم الشاشه وهكذا اي انها خاصه بالاسطر line بين العناصر والقيم التي تحتويها هذة الهاصيه نفس القيم للخاصيه : justify-content. ثانيا: الخصائص للitemبداخل اطارflexbox :- هذه الخصائص تكتب في style بداخل العنصر نفسه ويعتبر الitem بداخل اطار الفليكس بوكس ك الابن الاول الاساسي Base Child وجميع الابناء الاساسيون داخل اطار الفليكس بوكس يحصل لهم flex بشكل اتماتيكي. The flex item properties : 1. order: بهذه الخاصيه تستطيع اعادة ترتيب موقع العناصر بدون نقلها بنفسها وإنما تكتب رقم ترتيبها الجديد مثل تنقل العنصر الرابع الى الموقع الاول وهكذا. 2. flex-grow : تكتب فيها قيمه لعدد المرات التي تريد ان يتضاعف حجم العنصر بالنسبه للعناصر الباقيه 3. flex-shrink: عند وجود عناصر كثير فإنها تتقلص داخل الاطار الذي يحتويها لذلك بهذه الخاصيه تستطيع اعطاها القيمه صفر لمنع العنصر المحدد من التقلص ولكي يبقى على حجمه الاعتيادي. 4. flex-basis: 200px; تعني القيمه الابتدائيه يجب ان تكون 200 بكسل ولا تقل عنها ولكن ممكن تزيد عنها هذي الخاصيه تعطي شرط بان لايقل حجم العنصر المختار عن القيمه المعطاه. 5. flex هي اختصار لقيم الخصائص السابقهلكي تكتب القيم على طول بالترتيب السابق . قيم فقط. 6. align-self: center او flex-start او flex-end هذي القي الثلاثه التي تاخذها وعملها هو خاص بعنصر من عناصر اطار الفليكس بكس وذلك لتنظيم موقعه وتموضعه داخل الاطار هل هو اعلى ام في المنتصف او اسفل وهكذا. شكرا جزيلا.
Andrew Lobur 6 months ago
рррррррррррррррррррррррррррррррррррррр, внимать не реально
Alina Pchelnikova 6 months ago
втюрилась в глас
Guru Dk 7 months ago
Почему этот с***ный ИЕ ничего не поддерживает нормально? Это Майкрософт, КАРЛ! нужели такая большая компания не в состоянии переработать собственный браузер под современные требования!!!! Как же бесит.
Husein Kateev 8 months ago
Префиксы для flexbox уже не необходимы, с чем всех и поздравляю)
Niki Leader 10 months ago
Большое благодарю за пригодную инфу
Дмитрий Проскура 10 months ago
Серега красавец! С огромным наслаждением смотрю Твои уроки, огромное благодарю за работу. Писать к коментах всякие мерзости и умничать могут многие, а вот записать обычное полезное видео могут не многие!!!
олег павлов 11 months ago
МОЛОДЕЦ !!!!
Артур Іващенко 1 year ago
Спасибо весьма полезные уроки. Ждем выпуски по CSS Grid
Иван Иванов 1 year ago
лайка попрашайка)
Vitaly Orlov 1 year ago
Спасибо!!!
MaGu x 1 year ago
Отлично. Лайк/подписка. Ппж, потом флекса, посмотрю еще что там у тебя увлекательного на канале. Хороших мыслях для тебя и их воплощения
Валентин 1 year ago
Классные обучалки! Спасибо!
Василий Петров 1 year ago
Видео - класс!! А все те, кто гласит, что здесь немало воды либо создатель картавит - идите в жопу! Смотрите ивангая либо долбоеба вроде сахара, хули вы здесь запамятовали?
Ruslan Dobro 1 year ago
Вот вам для закрепления! в топ!
Юлия Эдуардовна 1 year ago
Спасибо за Ваши уроки) мое знакомство с FlexBox началось конкретно с их)) я сейчас не боюсь подвигаться далее.начин положено) однако мне бы хотелось, что бы уроки были изготовлены в виде теория-практика, то кушать, поначалу слайд со свойством, его описание, значения, рисунки какие-то схематичные, а позже уже практику показываете. Просто, этак понятнее ,что ли) а этак, уроки примечательные, еще один благодарю)
Abdulaziz Baiyrbek 1 year ago
глас от искусник сиесес
Vopros Vopros 1 year ago
Ебать ты картавый
Олег Сухих 1 year ago
Большое благодарю за серию уроков про флексбоксы. Действительно, пять! Нечего и добавить:)
Natalie Gats 1 year ago
красава авт
Павел 1 year ago
Доходчиво и понятно. Спасибо!
Елена Толочко 1 year ago
бомбезно и любопытно! этак содержать)
Денис Мадин 1 year ago
Серррёга Ты наилучший!
Сергей Храпин 1 year ago
margin: auto - это вообщем супер! Чтобы достигнуть такового эффекта без флексов, необходимо было душу дьяволу реализовать)
Alex Bel 1 year ago
Нет, далековато не этак. Есть еще два метода: одинешенек с эмуляцией поведения ячейки таблицы, иной без )
Alexey Marchena 1 year ago
Классно. Спасибо!
Ольга Щербакова 1 year ago
благодарю за задание!
RySiK 2x 1 year ago
Ребят здраствуйте, смотрю ваши видосы весьма полезные, продолжайте в том же духе, у меня проблема, Флекс Бокс это подмена медиа запросов либо они в комплексе должны трудиться?
Alex Unknown 1 year ago
блеа будто же бесит твой глас..РРРРРРРРРРРРРРРРРРРРРРРЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
Андрей FFF 1 year ago
Сергей, огромное благодарю, хорошие материалы и красивая подача.
Rasul Nezamov 1 year ago
Прекрасно!
John Wick 1 year ago
ценно, круто. однако мля. что этак кортаво нах?! аж простивно
Max Raven 1 year ago
Ты уродец
Oleksandr Kryvenko 2 years ago
Чем inline-flex принципно отличается от flex с flex-flow: row wrap; то реально осознать не могу.
Nikita Gusev 2 years ago
Ррррррррррррр
Эдуард Викторович 2 years ago
Поставлю лайк за буковку Р. Очень забавно глядеть на все это дело
Lena Di 2 years ago
одинешенек из наилучших туториалов про флэксы! Пересматриваю любой один будто необходимо освежить познания, обыкновенно на забугорных видео лучше объясняют однако этот плейлист исключение! Автору благодарю!
loftblog 2 years ago
Спасибо)
Александр Хома 2 years ago
Блин, это то что я этак длительно находил
loftblog 2 years ago
Отлично) Рады, что наши уроки полезны )
John Doe 2 years ago
хватило на 30 секунд аплбомба этого долбоеба. конечно ну-ка нахуй - лучше английский гайд почитаю со словарем.
Валерий Назаров 2 years ago
Спасибо!!! Посмотрел все 6 видео уроков, все весьма наглядно и понятно стало!
Станислав Кащеев 2 years ago
А будто быть с IE 8 и IE9?
Vitaliy aka Lops 2 years ago
+Станислав Кащеев полифил
Марина Трошина 2 years ago
Тому, кто вызнал про flex преждевременное - может быть там и вода, а новеньким, которые лишь слышали про flex, однако не работали - это превосходный задание. Огромное благодарю!
CyberGenius777 2 years ago
дьявол, а я лишь на данный момент об этой фиче вызнал)
Jenya Space 3 years ago
напишите хаки для старенькых Сафари, ато полавинка функций флекса там не работает((
Фыва Олдж 3 years ago
Не работает в android 4.1. Как не пробовал, не сумел вынудить трудиться правильно. Андроид 4.1 ещё весьма у многих, потому использовать flexbox на практике покамест спозаранку. Может кто знает какие-или хаки, хотя бы с внедрением js?
Никита Андрианов 3 years ago
отчего webkit с 2-мя значениями? -webkit-flex и -weblit-box
Alex Bel 1 year ago
В видео же разъясняется все. Пересмотреть можешь.
سيف بدر 3 years ago
استغفر الله 3 years ago
من الاردن
Владимир Ребров 3 years ago
иешка резануло очень не взаимосочетание, а схлопывание box - это контейнер, а не блок не хватает вступления, что-то типа: таблицы, float,flexbox. Суть - рассчитано на самый исходный степень, в связи с чем и разжевано соответствующе. Хотя для чего им флексбокс?:)
Voronko Славик 3 years ago
Залогинился чтобы лайкнуть.
Alpamys Moldashev 3 years ago
Интересное дело
Albek Zhitvaev 3 years ago
поправочка, если margin не заезжаезжает на иной margin, означает он не складывается.з.ы. а вообщем увлекательное видео вышло))
Мир звука 3 years ago
Взимосочетание margin принято именовать схлапыванием, если не ошибаюсь. Ещё: схлапывание срабатаывает лишь для верхних и нижних margin, однако вовек для боковых.Только не задумайтесь: попросту пробую быть полезным.
NoiroStar 10 months ago
Накладываение margin-ов этак и именуется - накладывание. А схлопывание, это когда контент элемента вылезает из потока (к примеру position: absolute либо float: left) и родитель теряет свой размер (схлопывается, как будто-бы height: 0). Самый обычный образец: <div class= parent ><div class= child style= float: left >Content</div></div>. У родителя в данном случае будет нулевая вышина.
Мир звука 3 years ago
+elena shaforostova Да, благодарю. :)
Elena Shvets 3 years ago
+Мир звука СхлОпывание же.
Master-CSS 3 years ago
Спасибо за ваш комментарий. Он весьма ценен для нас. Непременно учтем все ваши пожелания )))
Pavel Yakovlev 3 years ago
+Master-CSS рекомендую выучить базы css перед тем будто вписывать уроки
Мир звука 3 years ago
Так ведь в том же хроме всё без префиксов работает. Зачем добавили?
Master-CSS 3 years ago
+Мир звука поэтому что в более старенькых версиях хрома без префиксов не работает.
Den4023 3 years ago
Классно! Просьба еще все таки поведать о хаке к ие 9. Свойство чувствую будет любимое, однако заявка к верстке ie9+ уберут не быстро(
Alex Bel 1 year ago
На флоатах, к примеру, задать всем блокам схожую высоту не выйдет. Флоаты в данном случае задаются для того, чтоб в браузерах, в которых отсутствует помощь флексбоксов, макет не разваливался. Будет деградация, это конечно, однако колонки останутся на собственных местах.
questions answer 2 years ago
А для чего тогда флексбоксы если в итоге снова клепать на флоатах все)
Master-CSS 3 years ago
А ларчик то попросту раскрывался :)
Gatilin Maxim 3 years ago
Не нужно этак мастерить ради бога. Прописывайте флоаты совместно с флексбоксом. Дело в том, что флексбокс убирает флоаты и в итоге флоаты применятся лишь там где дудки поддержки флексов
Master-CSS 3 years ago
Да все попросту: <!--[if IE 9]>   переписываешь стили на флоаты :) <![endif]-->
Posa Mosa 3 years ago
Что за плагин, какой расставляет полосы при вложенности?)
Posa Mosa 3 years ago
+Master-CSS Спасибо вам за ваш труд,и поддержка :)
Master-CSS 3 years ago
Indent Guides вроде. Вот:
Денис Малиночкин 3 years ago
Я не понимаю, будто можно не устанавливать пробел перед фигурной скобкой. Я бы на месте селектора попросту ушел бы из кода.
Yakov Getler 2 months ago
Ооо, шутачки подкатили :D
Aleksys CIMR 3 months ago
ты не понимаешь этого, поэтому что ты итого только - свойство
Сергей Андреевич 2 years ago
+Денис Малиночкин В sublime автоматом добавляется пробел
Master-CSS 3 years ago
Я надеюсь, ваше любимое блюдо - курица в духовке, а то я не понимаю, будто можно по другому существовать. Я бы на месте курицы - вылез из духовки )))
Fibonacci 99 3 years ago
оч. любопытно, продолжай.с каждой технологией верстать все проще
Денис Богданов 3 years ago
В целом отлично и понятно. Но весьма затянуто. Было бы отлично перед тем будто выложить видео его подчистить от излишних слов и неправильных действий. Спасибо.
roman italian 3 years ago
Нормуль.
Master-CSS 3 years ago
Денис, записываю, будто выходит. Стараюсь все разъяснить тщательно, что бы хоть какой сообразил. В этом уроке 1-ые 3 минутки пришлось подавать техно информацию. В последующем уроке уже будет все по теме.
Adrian Lazarov 3 years ago
еще еще ещее!!!
Master-CSS 3 years ago
завтра выложим новое
Виталий Есипов 3 years ago
Все пять, однако картавость малость напрягает! А по теме все будто нужно!
Master-CSS 3 years ago
С этим кушать неувязка. Согласен. Но здесь уж ничего не поделаешь.
Vitun RMHouse 3 years ago
Спасибо. Отлично. Полезно.
Михаил Новиков 3 years ago
Друг, эти видео точно наберут больше 50, даже больше 10к я уверен наберут, Инфы по flexbox'ам не достаточно в нете, этак что пиши. Благодарю
Abdulaziz Baiyrbek 1 year ago
извини однако ссылка не работает
FactoREAL 3 years ago
во первых - мой комент был не к твоему видео, а к коменту другого человека. я это писал больше для него, чем для создателя видео. Я  до него пробовал донести идея, что лучше прочесть ту статью, чем глядеть это видео. всё это, естественно же мое личное мировоззрение. во вторых> - я не согласен с тем, что у тебя выходит и это твоё. конкретно потому мой коментарий и был написан. ИМХО печатная статья полезнее чем этот видео-задание. в третьих - возьму на себя храбрость представить, что я чуть-чуть (совершенно капельку) больше разбираюсь в теме, чем те люд, которым нравятся эти уроки и которые не лицезреют тут воды. может быть из за неопытности они еще не способны это узреть, они воспринимают всякую информацию за верную. можешь находить что у меня ЧСВ зашкаливает, твое право. однако я только вижу что материал средней полезности, кушать лучше, и я поделился своим воззрением.  в итоге - все эти косяки с водой и дикцией это не обида тебя лично, а констатация фактов. и тупо ратифицировать что материал с косяками лучше, чем без их. а в этот момент кушать материал лучше чем твой. этак для чего же обучаться по более нехорошему источнику, если кушать лучше ? кому-то больше по душе видео-задание, а кто-то глядит его, лишь поэтому что покамест что не отыскали более неплохой ключ. вот для второго типа людей я и пишу эти коменты (может и напрасно. хз.). по поводу того, что я лишь критикую в коментах могу произнести последующее: мне не любопытно строчить миллионный комент ваааау. супер (которые имхо лучше поменять на клик по кнопке like). таких коментариев и без меня хватает. мне больше любопытно обсудить (либо покритиковать) и вторую сторону медали, пускай и в таковой оскорбительной манере. 
Master-CSS 3 years ago
Холивары? Насмешки? Ты свои комменты почитай дружок, там не считая этого, ничего больше и дудки. Ты смысла то не поймал. *Я не хохотал над тобой*, когда предложил записать свое. И уж точно бы не унижал тебя, когда бы его поглядел. Просто попробуй и усвоишь, что это сходу не дается. Опять же, маму мою сюда приплел, школьную программку, абзацы с картинами, к чему все это?? Ты еще деда с бабкой моих припиши :) *Ладно человек, если не возражаешь, давай перейдем на более конструктивный беседа.* Ты пишешь, что нужно мастерить видео надлежащие - это будто?? Я делаю этак, будто мне нравится, и я в их стараюсь все очень разъяснить. У меня это выходит, *это мое*. Ты же мне предлагаешь зачитать пару абзацев из той статьи??? *В чем тогда будет резон моих занятий?* Я отлично вижу по реакции аудитории нравятся ей мои видео либо дудки. Большинству по душе, я не рассусоливаю и не лью воды, объясняю чисто по теме, этак, что бы даже новенький сообразил. Кому то это будто водой, ну-ка и пускай, за то мне и многим другим это будто полезной информацией. Странно, истина? А со временем я научусь еще лучше мастерить. Над дикцией я на данный момент работаю более чем усиленно. С буковкой РРРР бьюсь с юношества. Раньше ужаснее было намного. Но это не означает, что мне невозможно вписывать видео. Наоборот, если бы я по жизни слушал таких критиков будто ты, в том числе и неких учителей - того что у меня кушать, я бы не достигнул. *Как по другому выучиться что-то мастерить без практики???*
FactoREAL 3 years ago
+Master-CSS я неужели произнес что я смогу сделать лучше ? мне это не необходимо, попросту если люд берутся мастерить что-то, то нужно  и мастерить соответствующе. А с таким подходом проблема о нужности такового материала встает достаточно обоснованно, а не с издевкой , будто это сделал ты. это вообщем тема для холиваров - что лучше, книжка либо видео-задание. в данном случае от статьи (на которую я кинул ссылку) полезности еще больше чем от этого видео (издержал 12 минут жизни и вызнал чуток больше чем ничего). если не способен осилить пару абзацев текста (даже на российском и с картинами) то не понимаю будто ты вообщем оказался в теме flex'a ? а у тебя вообщем все сводится к записи конкретно видео (будто единственного правильного вариант подачи материала), думается мне, что ты из тех, кому сочинения в школе мать писала, а школьную программку ты всю в коротком изложении читал (либо не читал совсем), даже ссылку для тебя необходимо сбросить в видео формате.
Михаил Шварц ispaniagid ru 3 years ago
Спасибо! Все попросту и понятно