Main Axis و Cross Axis

دو محوری که کل Flexbox بر آن‌ها بنا شده: Main Axis و Cross Axis

در درس قبل با Flex Container و Flex Item آشنا شدیم و به‌طور مختصر به دو محور اصلی اشاره کردیم. حالا وقتشه این دو محور رو کامل و دقیق ببینیم؛ چون تقریباً تمام Propertyهای باقی‌مانده این فصل (مثل justify-content و align-items)، مستقیماً بر پایه همین دو محور تعریف می‌شن.

یادآوری سریع: Main Axis و Cross Axis

هر Flex Container، دو محور فرضی داره:

• Main Axis (محور اصلی): محوری که Flex Itemها در طول آن، به‌صورت اصلی، چیده می‌شن.
• Cross Axis (محور عرضی): محوری که عمود بر Main Axis است.

جهت پیش‌فرض این دو محور

.container {
  display: flex;
}

به‌طور پیش‌فرض (یعنی بدون تعریف هیچ Property اضافه‌ای)، Main Axis افقیه (از سمت شروع متن به سمت پایانش، که در فصل ۱۱ با Inline Axis آشنا شدیم) و Cross Axis عمودیه (از بالا به پایین، معادل همون Block Axis).

flex-direction: تغییر جهت Main Axis

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

Property به اسم flex-direction مشخص می‌کنه Main Axis دقیقاً در چه جهتی قرار بگیره. این Property رو با جزئیات کامل در درس بعدی همین فصل بررسی می‌کنیم؛ فعلاً فقط لازمه بدونیم که تغییر این Property، مستقیماً روی جهت Main Axis و Cross Axis اثر می‌ذاره.

flex-direction	جهت Main Axis	جهت Cross Axis
row (پیش‌فرض)	افقی	عمودی
column	عمودی	افقی

نکته مهم: وقتی flex-direction از row به column تغییر می‌کنه، Main Axis و Cross Axis، جای خودشون رو کاملاً عوض می‌کنن؛ یعنی Main Axis از افقی به عمودی، و Cross Axis از عمودی به افقی تبدیل می‌شه.

چرا این دو محور اهمیت اساسی دارند؟

تقریباً تمام Propertyهای چیدمانی Flexbox، به‌جای اشاره مستقیم به «افقی» یا «عمودی»، به Main Axis و Cross Axis اشاره می‌کنن. این یعنی، دقیقاً مثل چیزی که در فصل ۱۱ با Logical Properties دیدیم، رفتار این Propertyها، به‌طور خودکار با تغییر flex-direction هماهنگ می‌شه.

.container {
  display: flex;
  justify-content: center;
}

در این مثال، justify-content (که با جزئیات کامل در درس‌های بعدی می‌بینیم) همیشه در طول Main Axis عمل می‌کنه؛ یعنی اگه flex-direction: row باشه، این Property آیتم‌ها رو افقی وسط‌چین می‌کنه؛ اما اگه flex-direction: column باشه، همون Property، بدون تغییر اسمش، آیتم‌ها رو عمودی وسط‌چین می‌کنه؛ چون Main Axis این‌بار عمودیه.

یک مثال بصری برای درک تفاوت

.row-example {
  display: flex;
  flex-direction: row;
  height: 150px;
  border: 1px solid #ccc;
}

<div class="row-example">
  <div>آیتم ۱</div>
  <div>آیتم ۲</div>
  <div>آیتم ۳</div>
</div>

در این مثال، چون flex-direction: row است، آیتم‌ها در طول Main Axis (که افقیه) کنار هم چیده می‌شن؛ یعنی از سمت شروع متن به سمت پایانش. اگه اندازه هر آیتم از عرض خودش کمتر از ارتفاع Container باشه، در طول Cross Axis (عمودی)، به‌طور پیش‌فرض کل ارتفاع Container رو اشغال می‌کنن (این رفتار پیش‌فرض رو در درس مربوط به align-items کامل می‌بینیم).

.column-example {
  display: flex;
  flex-direction: column;
  height: 300px;
  border: 1px solid #ccc;
}

حالا با تغییر flex-direction به column، همون سه آیتم، به‌جای کنار هم، زیر هم چیده می‌شن؛ چون Main Axis این‌بار عمودیه. در این حالت، آیتم‌ها به‌طور پیش‌فرض، کل عرض Container رو (در طول Cross Axis که حالا افقیه) اشغال می‌کنن.

وابستگی Main Axis به جهت سند (RTL/LTR)

.container {
  display: flex;
  flex-direction: row;
}

<div class="container" dir="rtl">
  <div>آیتم اول</div>
  <div>آیتم دوم</div>
  <div>آیتم سوم</div>
</div>

این نکته، مستقیماً به مفاهیمی که در فصل ۱۱ (Logical Properties) دیدیم مرتبطه: در حالت flex-direction: row، جهت Main Axis، دقیقاً از جهت Inline Axis سند (که با dir مشخص می‌شه) پیروی می‌کنه. یعنی در یک سند dir="rtl" (مثل فارسی)، «آیتم اول» از سمت راست شروع می‌شه، نه چپ؛ چون Main Axis، در طول همون Inline Axis (که در RTL از راست به چپه)، حرکت می‌کنه. این رفتار، کاملاً خودکاره و نیازی به تنظیم دستی اضافه نداره.

یک نکته مهم: محورها، ثابت و مستقل از محتوا نیستند

باید توجه داشت که Main Axis و Cross Axis، مفاهیمی کاملاً وابسته به تنظیمات flex-direction و جهت سند‌ان؛ نه یک قانون فیزیکی ثابت مثل «افقی همیشه محور اصلیه». این انعطاف‌پذیری، دقیقاً همون چیزیه که به Flexbox اجازه می‌ده، بدون تغییر ساختار HTML، فقط با تغییر یک Property (flex-direction)، کل جهت‌گیری یک چیدمان رو کاملاً معکوس یا بچرخونه.

پیش‌نمایشی از Propertyهای آینده این فصل

برای این‌که ارتباط این دو محور با ادامه فصل روشن‌تر بشه، یک جدول کوتاه از Propertyهایی که در درس‌های بعدی می‌بینیم:

Property	عمل می‌کند روی
justify-content	Main Axis
align-items / align-content	Cross Axis
flex-wrap	نحوه شکستن آیتم‌ها در طول Cross Axis

نکات مهم

• Main Axis محور اصلی چیدمان Flex Itemهاست، و Cross Axis همیشه عمود بر آن است.
• flex-direction: row باعث می‌شود Main Axis افقی باشد؛ flex-direction: column باعث می‌شود Main Axis عمودی شود.
• جهت Main Axis در حالت row، از جهت Inline Axis سند (یعنی ویژگی dir) پیروی می‌کند.

اشتباهات رایج

• تصور اینکه Main Axis همیشه افقی است؛ در حالی که این کاملاً به مقدار flex-direction بستگی دارد.
• فراموش کردن این‌که با تغییر flex-direction از row به column، معنای Propertyهایی مثل justify-content هم به‌طور خودکار تغییر می‌کند.
• نادیده گرفتن تأثیر جهت سند (RTL/LTR) بر جهت واقعی Main Axis در حالت row.

جمع‌بندی

هر Flex Container دو محور دارد: Main Axis (محور اصلی چیدمان) و Cross Axis (عمود بر آن). جهت این دو محور، توسط Property به اسم flex-direction تعیین می‌شود؛ row باعث افقی شدن Main Axis و column باعث عمودی شدن آن می‌شود. تقریباً تمام Propertyهای دیگر Flexbox، مثل justify-content و align-items، بر پایه همین دو محور تعریف می‌شوند، نه جهت فیزیکی ثابت؛ درست همان اصلی که در فصل Logical Properties هم دیدیم.