Order در Flexbox

تغییر ترتیب نمایش بدون تغییر HTML: Property به اسم order

در تمام درس‌های قبل این فصل، ترتیب نمایش Flex Itemها، همیشه دقیقاً همون ترتیبی بود که در HTML نوشته شده بودن (به‌جز حالت‌های row-reverse و column-reverse که در درس ۱۲-۳ دیدیم و کل ترتیب رو یک‌جا معکوس می‌کردن). حالا وقتشه با Property به اسم order آشنا بشیم که اجازه می‌ده ترتیب نمایش تک‌تک آیتم‌ها رو، کاملاً مستقل از هم و بدون هیچ تغییری در ساختار HTML، کنترل کنیم.

order چیست؟

.item {
  order: 1;
}

Property به اسم order یک عدد صحیح می‌گیره که مشخص می‌کنه یک Flex Item، نسبت به بقیه آیتم‌های همون Container، در چه ترتیبی نمایش داده بشه. آیتم‌ها، صرف‌نظر از ترتیب واقعی‌شون در HTML، بر اساس این عدد، از کوچک‌ترین به بزرگ‌ترین، مرتب می‌شن.

مقدار پیش‌فرض: صفر

.item {
  order: 0; /* مقدار پیش‌فرض */
}

مقدار پیش‌فرض order، برای همه Flex Itemها، برابر 0 است. وقتی همه آیتم‌ها order یکسانی داشته باشن (مثلاً همون مقدار پیش‌فرض صفر)، اون‌وقت ترتیب نمایش‌شون، دقیقاً همون ترتیب طبیعی HTML (که با Source Order، همون مفهومی که در فصل ۲ دیدیم، مشخص می‌شه) خواهد بود.

یک مثال ساده برای درک تأثیر order

.item-a {
  order: 2;
}

.item-b {
  order: 1;
}

.item-c {
  order: 3;
}

<div class="container">
  <div class="item-a">آیتم A</div>
  <div class="item-b">آیتم B</div>
  <div class="item-c">آیتم C</div>
</div>

در این مثال، با اینکه ترتیب واقعی در HTML، A سپس B سپس C است، اما به‌خاطر مقادیر order، ترتیب نمایش نهایی روی صفحه، از کوچک‌ترین order به بزرگ‌ترین، این‌طور خواهد بود: اول B (با order: 1)، بعد A (با order: 2)، و در آخر C (با order: 3).

پذیرش مقادیر منفی

.priority-item {
  order: -1;
}

order می‌تونه عدد منفی هم بگیره. چون همه آیتم‌های دیگه، معمولاً مقدار پیش‌فرض 0 رو دارن، یک آیتم با order: -1، همیشه قبل از بقیه (که order‌شون صفر یا بیشتره) قرار می‌گیره؛ بدون اینکه لازم باشه مقادیر بقیه آیتم‌ها رو هم تغییر بدیم.

کاربرد بسیار رایج: تغییر ترتیب نمایش بر اساس اندازه صفحه‌نمایش

.layout {
  display: flex;
  flex-wrap: wrap;
}

.main-content {
  order: 1;
}

.sidebar {
  order: 2;
}

@media (max-width: 600px) {
  .main-content {
    order: 2;
  }

  .sidebar {
    order: 1;
  }
}

یکی از رایج‌ترین و عملی‌ترین کاربردهای order، تغییر اولویت نمایش محتوا در اندازه‌های مختلف صفحه‌نمایشه (که به‌طور کامل در فصل Responsive Design، با Media Query، بررسیش می‌کنیم). در این مثال، در حالت عادی، محتوای اصلی قبل از نوار کناری نمایش داده می‌شه؛ ولی در صفحه‌نمایش‌های کوچک (مثل موبایل)، با تغییر مقادیر order در داخل Media Query، می‌شه بدون هیچ تغییری در ساختار HTML، نوار کناری رو، مثلاً برای اولویت بیشتر، قبل از محتوای اصلی نمایش داد.

نکته مهم: order فقط ترتیب بصری را تغییر می‌دهد، نه ساختار DOM

این یک نکته بسیار مهم از نظر Accessibility (دسترسی‌پذیری) است: order، فقط ترتیب نمایش بصری عناصر رو تغییر می‌ده؛ اما ترتیب واقعی این عناصر در ساختار DOM (که مثلاً صفحه‌خوان‌ها یا کاربرانی که با کلید Tab پیمایش می‌کنن، ازش استفاده می‌کنن)، بدون تغییر باقی می‌مونه. یعنی اگه order، ترتیب بصری آیتم‌ها رو کاملاً برعکس ترتیب منطقی محتوا کنه، ممکنه یک کاربر صفحه‌خوان یا کاربری که با صفحه‌کلید پیمایش می‌کنه، محتوا رو به یک ترتیب کاملاً نامتناسب با چیزی که بصری دیده می‌شه، تجربه کنه.

یک مثال از این مشکل بالقوه

.form-container {
  display: flex;
}

.submit-button {
  order: -1;
}

<div class="form-container">
  <input type="text" placeholder="نام">
  <button class="submit-button">ارسال</button>
</div>

در این مثال، دکمه «ارسال» با order: -1، به‌طور بصری، قبل از فیلد ورودی «نام» نمایش داده می‌شه. اما یک کاربر که با کلید Tab پیمایش می‌کنه، همچنان طبق ترتیب واقعی HTML (یعنی اول input، بعد دکمه) بین این عناصر حرکت می‌کنه؛ که این ناهماهنگی بین ترتیب بصری و ترتیب واقعی پیمایش، می‌تونه بسیار گیج‌کننده باشه.

توصیه کلی: order را فقط برای موارد جزئی و غیرمعنایی استفاده کنید

به همین دلیل، توصیه رایج اینه که از order فقط برای تغییرات بصری جزئی (مثل مثال Responsive که دیدیم، جایی که ترتیب معنایی محتوا واقعاً مهم نیست) استفاده بشه؛ نه برای تغییرات بزرگ و اساسی در ترتیب محتوای معنادار (مثل فرم‌ها یا محتوایی که ترتیب خوندنش اهمیت داره). اگه ترتیب واقعی محتوا باید عوض بشه، بهتره این تغییر مستقیماً در خود HTML اعمال بشه، نه صرفاً با CSS.

order در کنار flex-direction: row-reverse

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

یادآوری از درس ۱۲-۳: flex-direction: row-reverse، ترتیب همه آیتم‌ها رو یک‌جا معکوس می‌کنه؛ در حالی که order، اجازه می‌ده ترتیب هر آیتم رو، مستقل و دقیق، کنترل کنیم. این دو، ابزارهای متفاوتی برای نیازهای متفاوتی هستن: اگه فقط بخوایم کل ترتیب رو برعکس کنیم، row-reverse ساده‌تره؛ اگه بخوایم ترتیب دقیق و انتخابی یک یا چند آیتم خاص رو تغییر بدیم، order ابزار مناسب‌تریه.

نکات مهم

• order یک عدد صحیح (مثبت، منفی یا صفر) می‌پذیرد و آیتم‌ها را از کوچک‌ترین به بزرگ‌ترین مقدار، نمایش می‌دهد.
• مقدار پیش‌فرض order برای همه آیتم‌ها صفر است؛ در این حالت، ترتیب نمایش، همان ترتیب طبیعی HTML خواهد بود.
• order فقط ترتیب بصری را تغییر می‌دهد، نه ترتیب واقعی در ساختار DOM؛ که می‌تواند برای کاربران صفحه‌خوان یا پیمایش با صفحه‌کلید، ناهماهنگی ایجاد کند.

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

• استفاده گسترده از order برای تغییرات بزرگ و معنادار در ترتیب محتوا، بدون توجه به تأثیر منفی آن بر دسترسی‌پذیری.
• تصور اینکه order، ترتیب واقعی عناصر را در HTML یا در پیمایش با صفحه‌کلید هم تغییر می‌دهد.
• فراموش کردن این‌که آیتم‌های بدون order صریح، مقدار پیش‌فرض صفر دارند و بین آیتم‌های با order منفی و مثبت قرار می‌گیرند.

جمع‌بندی

Property به اسم order، امکان تغییر ترتیب نمایش بصری تک‌تک Flex Itemها را، مستقل از ترتیب واقعی‌شان در HTML، فراهم می‌کند؛ آیتم‌ها بر اساس این عدد، از کوچک‌ترین به بزرگ‌ترین، مرتب می‌شوند. این Property، کاربرد رایجی در طراحی Responsive دارد، ولی باید با احتیاط استفاده شود، چون فقط ترتیب بصری را تغییر می‌دهد و می‌تواند با ترتیب واقعی پیمایش صفحه‌خوان یا صفحه‌کلید، ناهماهنگی ایجاد کند.