آموزش CSS: استفاده از Flexbox برای Layout (تعاملی)

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

پیش نمایش Flexbox Foreshadowing Flexbox

• پیش نمایش Flexbox Foreshadowing Flexbox

• چالش: ایجاد ظروف فلکس Challenge: Creating Flex Containers

• چالش: شروع یک شبکه Challenge: Starting a Grid

• چالش: ایجاد ظروف Flex درون خطی Challenge: Creating Inline Flex Containers

• چالش: انعطاف عناصر فرم Challenge: Flexing Form Elements

• پیچیدن شیاد Wily Wrapping

• چالش: بسته بندی محتوای رسانه ای Challenge: Wrapping Media Content

• چالش: بسته بندی اقلام شبکه Challenge: Wrapping Grid Items

توجیه و نظم Justification and Order

• عدالت در توجیه Justice in Justifying

• چالش: توزیع فضا در اطراف Challenge: Distributing Space Around

• چالش: توزیع فضا بین Challenge: Distributing Space Between

• چالش: توجیه محتوای ستون Challenge: Justifying Column Content

• چالش: تراز کردن موارد درون خطی Challenge: Aligning Inline Items

• در فلکس باکس سفارش دهید! Order in the Flexbox!

• چالش: ترتیب متناوب Challenge: Alternating Order

• چالش: سفارش بر اساس کلاس Challenge: Order by Class

تراز کردن Alibis Aligning Alibis

• تراز کردن Alibis Aligning Alibis

• چالش: محور عمودی محتوا Challenge: Vertically Centering Content

• چالش: تراز کردن در یک صفحه Challenge: Aligning in a Page

• چالش: تراز کردن موارد تو در تو Challenge: Aligning Nested Items

افزایش اندازه خواص Sizing Up the Properties

• اندازه های مشکوک Suspect Sizes

• چالش: رشد یک شبکه Challenge: Growing a Grid

• چالش: فرم های انعطاف پذیر Challenge: Flexing Forms

• چالش: اجتناب از کوچک شدن Challenge: Avoiding Shrinking

• پهنای کسر Withholding Widths

• چالش: تقسیم پایه Challenge: Basis Split

• چالش: اساس صفحه نمایش کوچک Challenge: Small Screen Basis

• چالش: پایه صفحه نمایش بزرگ Challenge: Large Screen Basis

نقشه برداری اموال Property Plotting

• نقشه برداری اموال Property Plotting

• چالش: رد کردن تراز Challenge: Overriding Alignment

• چالش: برگرداندن تراز Challenge: Reverting Alignment

• چالش: تراز کردن اقلام پیچیده شده Challenge: Aligning Wrapped Items

• مخفف ترسناک Scary Shorthand

• چالش: Refactoring to Flex Challenge: Refactoring to Flex

• چالش: Refactoring From Flex Challenge: Refactoring From Flex

• چالش: Refactoring معکوس Challenge: Reverse Refactoring