آموزش دوره کامل Flexbox: Master CSS3 Flexbox for Good

سرفصل ها و درس ها

به دوره Flexbox خوش آمدید! Welcome To The Flexbox Course!

• چگونه از این دوره بهترین استفاده را ببریم How To Make The Most Of This Course

بیایید درست شیرجه بزنیم: اصول Flexbox را بیاموزید Let's Dive Right In: Learn The Flexbox Basics

• Flexbox چیست و چرا باید از آن استفاده کنم؟ What is Flexbox and Why Should I Use It?

• پشتیبانی مرورگر برای Flexbox چطور؟ What About Browser Support for Flexbox?

• چگونه از Flexbox استفاده کنم؟ How Do I Use Flexbox?

• اصول Flexbox Flexbox Principles

• امتحان: اصول Flexbox Quiz: Flexbox Basics

یک ظاهر طراحی ظروف فلکس Styling Flex Containers

• flex-direction - ایجاد طرح‌بندی ردیف و ستون flex-direction - Creating Row & Column Layouts

• امتحان: جهت انعطاف پذیری Quiz: flex-direction

• justify-content - توجیه اقلام در امتداد محور اصلی justify-content - Justifying Items Along the Main Axis

• امتحان: توجیه محتوا Quiz: justify-content

• align-item - تراز کردن اقلام در امتداد محور متقاطع align-items - Aligning Items Along the Cross Axis

• امتحان: تراز کردن آیتم ها Quiz: align-items

• flex-wrap - چند ردیف و بسته بندی در داخل ظروف فلکس flex-wrap - Multiple Rows & Wrapping Inside Flex Containers

• امتحان: انعطاف پذیر Quiz: flex-wrap

• align-content - توجیه محتوا در امتداد محور متقاطع align-content - Justifying Content Along the Cross Axis

• امتحان: تراز کردن محتوا Quiz: align-content

طراحی اقلام فلکس Designing Flex Items

• سفارش - مرتب سازی مجدد اقلام Flex order - Reordering Flex Items

• تراز خود - کودکان سرسخت align-self - Stubborn Children

• flex-grow - اجازه دهید کودکان رشد کنند flex-grow - Letting Children Grow

• مسابقه: رشد انعطاف پذیر Quiz: flex-grow

• flex-shrink - Shrinking Flex Items flex-shrink - Shrinking Flex Items

• آزمون: انعطاف پذیر Quiz: flex-shrink

• flex-basis - تنظیم اندازه پایه flex-basis - Setting the Base Size

• آزمون: بر اساس انعطاف پذیری Quiz: flex-basis

Flexbox در عمل Flexbox in Practice

• شبکه های فلکس باکس: ایجاد گالری های پاسخگو شماره 1 (کد حداقل) Flexbox Grids: Creating Responsive Galleries #1 (Minimal Code)

• شبکه های فلکس باکس: ایجاد گالری های پاسخگو شماره 2 (انعطاف پذیری بیشتر) Flexbox Grids: Creating Responsive Galleries #2 (Extra Flexibility)

• مرکزیت عمودی واقعی با Flexbox (دیگر تراز عمودی وجود ندارد) Real Vertical Centering with Flexbox (no more vertical-align)

• الگوی شی رسانه The Media Object Pattern

• طرح جام مقدس The Holy Grail Layout

• برگه تقلب Flexbox Flexbox Cheat Sheet

از اینجا کجا بریم... Where to go from here...

• یک جمع بندی سریع و چه چیزی بعد A Quick Recap & What's Next

• امتیاز: به عنوان یک توسعه دهنده نرم افزار به پتانسیل کامل خود برسید Bonus: Reach Your Full Potential As A Software Developer