آموزش ایجاد صفحات Responsive با CSS FlexBox

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

درک Flexbox ها Understanding Flexboxes

• معرفی ماژول Module Introduction

• کاوش در فایلهای پروژه Exploring the Project Files

• دانستن اصول و اصطلاحات Flexbox Knowing the Basics and Flexbox Terminology

• درک ظرف Flexbox Understanding the Flexbox Container

• تعریف جهت با سطرها و ستون ها Defining Direction with Rows and Columns

• بررسی محورهای اصلی و متقاطع Exploring the Main and Cross Axes

• شکستن یک طراحی به Flexboxes Breaking down a Design to Flexboxes

• نتیجه گیری ماژول Module Conclusion

راه اندازی ظرف Flexbox Setting up the Flexbox Container

• معرفی ماژول Module Introduction

• ایجاد کانتینر Creating the Container

• تنظیم جهت فلکس Adjusting the Flex Direction

• بسته بندی محتوا به خط بعدی Wrapping Content to the Next Line

• فاصله دادن محتوا در امتداد محور اصلی با توجیه Spacing Content along the Main Axis with Justify

• تراز کردن موارد در امتداد محور عرضی Aligning Items along the Cross Axis

• تنظیم محتوا در امتداد محور Adjusting the Content along the Cross Axis

• لانه سازی کانتینرها در ظرف ها Nesting Containers within Containers

• نتیجه گیری ماژول Module Conclusion

تنظیم موارد Flexbox Adjusting the Flexbox Items

• معرفی ماژول Module Introduction

• تغییر ترتیب موارد Changing the Order of Items

• تنظیم اندازه موارد خاص با رشد Adjusting the Size of Specific Items with Grow

• کوچک کردن موارد فلکس Making Flex Items Shrink

• تعریف اندازه پیش فرض Flex Defining the Flex Item Default Size

• تراز کردن موارد خاص فلکس Aligning Specific Flex Items

• تنظیم دقیق محتوای با CSS Fine Tuning Content with CSS

• نتیجه گیری ماژول Module Conclusion

حل چالش های Flexbox Solving Flexbox Challenges

• معرفی ماژول Module Introduction

• راه اندازی چالش یک Setting up Challenge One

• قدم زدن در راه حل چالش یک Walking through the Challenge One Solution

• راه اندازی چالش دو Setting up Challenge Two

• قدم زدن در راه حل چالش دو Walking through the Challenge Two Solution

• چه زمانی از Flexbox استفاده نکنید When Not to Use Flexbox

• نتیجه گیری ماژول Module Conclusion