LoftBlog: Flexbox CSS3 #1 — Знакомство с FlexBox - видео HD
00:12:42
loftblog 299 роликов
110782 просмотра на сайте 12n.ru
Flexbox CSS3 #1 — Знакомство с FlexBox - видео.
Пройди БЕСПЛАТНО профориентацию в IT — bit.ly/2NLILneСегодня начинаем знакомиться с FlexBox. Мы узнаем, про его терминологию, кроссбраузерность, какие свойства CSS в нем не работают, и маленькие нюансы по обработке внешних отступов (margin).Ссылки из урока:1. Ссылка на архив FlexBox: goo.gl/xIBfLI2. Ссылка на видеокурс по Brackets (2.20):www.youtube.com/playlist?list=PLPpaecEYRC8bGw3oj3ecnPjSe09r4bPyoАвтор видеокурса – Сергей Михалевич.www.youtube.com/c/Master-CSSПлейлист Flexbox CSS:www.youtube.com/playlist?list=PLY4rE9dstrJzj68Y8SlQlhIdb5hbGQLIUСмотрите курс «Bootstrap»: www.youtube.com/playlist?list=PLY4rE9dstrJwP_JUTts9AtMVtJlJVGxWKШкола онлайн-образования: loftschool.com/ Telegram: telegram.me/loftblog Slack: slack.loftblog.ru/ Сайт: loftblog.ru/ Instagram: www.instagram.com/loftblog/ Группа вконтакте: vk.com/loftblog Facebook: www.facebook.com/loftblog Twitter: twitter.com/loft_blogБольше уроков от lofblog: #loftblogВсе уроки по хештегу: #loftblogFlexboxПолезные уроки для веб-программиста: #вебпрограммист#FlexboxПоставь лайк — смотивируй автора писать еще :)
развернуть свернуть
ولها عدة خصائص ولل 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 هذي القي الثلاثه التي تاخذها
وعملها هو خاص بعنصر من عناصر اطار الفليكس بكس وذلك لتنظيم موقعه وتموضعه داخل الاطار هل هو اعلى ام في المنتصف او اسفل وهكذا…
شكرا جزيلا.
Спасибо всем.