پیش‌بینی flex-direction در CSS؛ چیدمان عمودی آیتم‌ها

محور اصلی فلکس همیشه افقی نیست. flex-direction:row آیتم‌ها رو در راستای خط می‌چینه و column اون‌ها رو از بالا به پایین می‌ذاره. وقتی محور عوض می‌شه، معنای محور اصلی و محور عمود بر اون هم عوض می‌شه. به همین دلیل بهتره به‌جای حفظ‌کردن «فلکس یعنی ردیف»، اول مقدار direction رو بررسی کنی.

مثال یک فهرست مراحل رو عمودی نمایش می‌ده. توی سؤال، سه مورد با نام‌های مشخص داریم و فقط باید شکل ترتیبشون رو پیش‌بینی کنی. خطای رایج اینه که rtl رو معادل برعکس‌شدن ستون بدونیم. جهت راست به چپ روی شروع محور افقی اثر داره، ولی column معمولی همچنان از بالا به پایین پیش می‌ره. مقدار column-reverse گزینه دیگری است که عمداً اینجا استفاده نشده. برای پاسخ درست به ترتیب HTML وفادار بمون و سپس محور اصلی رو مشخص کن. در این مرحله اندازه آیتم‌ها و فضای بینشون عامل تعیین‌کننده پاسخ نیستن.

✍️ مثال حل‌شده:

<ol class="steps"><li>انتخاب</li><li>پرداخت</li></ol>
<style>.steps { display:flex; flex-direction:column; }</style>

حالا نوبت توئه: ظرف .stack در جهت rtl دارای display:flex و flex-direction:column است. فرزندها در HTML «شروع»، «تمرین» و «پایان» هستند. ترتیب دیداری از بالا به پایین را انتخاب کن؛ column-reverse، order یا موقعیت‌دهی دیگری در کد وجود ندارد.

فعالیت شما

ظرف .stack در جهت rtl دارای display:flex و flex-direction:column است. فرزندها در HTML «شروع»، «تمرین» و «پایان» هستند. ترتیب دیداری از بالا به پایین را انتخاب کن؛ column-reverse، order یا موقعیت‌دهی دیگری در کد وجود ندارد.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

<!doctype html> <html lang="fa" dir="rtl"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head> <body> <div class="stack"><div>شروع</div><div>تمرین</div><div>پایان</div></div> </body> </html>

فعالیت شما

مطالعهٔ این گام برای همه آزاد است

کد اولیهٔ فعالیت

ظاهر صفحه (CSS)

گزینه‌های پیش‌بینی خروجی