کنترل اندازه و ترتیب هر آیتم در فلکس‌باکس

تنظیمات حرفه‌ای آیتم‌ها در Flexbox! 🚀

سلام دوستای هنرمند! تا اینجا یاد گرفتیم چطور کانتینر فلکس رو تنظیم کنیم و چطور آیتم‌ها رو با justify-content و align-items تراز کنیم. اما داستان Flexbox به اینجا ختم نمی‌شه! الان می‌خوایم وارد دنیای تنظیمات اختصاصی Flex Items (آیتم‌های فلکس) بشیم. با خصوصیت‌هایی مثل order، flex-grow، flex-shrink و flex-basis، می‌تونیم کنترل دقیق‌تری روی رفتار هر آیتم داشته باشیم. آماده‌اید تا استادتراز کردن آیتم‌ها بشیم؟ 😉

1. `order`: تغییر ترتیب نمایش آیتم‌ها! 🔄

یکی از قابلیت‌های خیلی باحال Flexbox اینه که می‌تونیم ترتیب نمایش آیتم‌ها رو بدون تغییر در کدهای HTML، عوض کنیم! خصوصیت order دقیقاً همین کار رو می‌کنه. به طور پیش‌فرض، همه‌ی آیتم‌ها order: 0; دارن. هرچی عدد order یه آیتم بزرگتر باشه، دیرتر نمایش داده می‌شه (یعنی به سمت انتهای Main Axis می‌ره). هرچی کوچکتر باشه، زودتر نمایش داده می‌شه (یعنی به سمت ابتدای Main Axis می‌ره). اعداد منفی هم برای قرار دادن آیتم‌ها قبل از بقیه‌ی موارد استفاده می‌شن.

.flex-container-order {
  display: flex;
  flex-direction: row; /* فرض می‌کنیم محور اصلی افقی است */
  background-color: #d1c4e9;
  padding: 10px;
  margin-bottom: 15px;
}

.flex-item-order {
  width: 70px;
  height: 70px;
  background-color: #7e57c2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  margin: 5px;
}

.item-1 { order: 3; background-color: #8e24aa; } /* بعد از همه */
.item-2 { order: 1; background-color: #9575cd; } /* اول */
.item-3 { order: 4; background-color: #673ab7; } /* بعد از اولی */
.item-4 { order: 2; background-color: #5e35b1; } /* دوم */
.item-5 { order: -1; background-color: #311b92; } /* قبل از همه */

`order` برای سناریوهایی مثل واکنش‌گرایی (Responsive Design) خیلی مفیده. مثلاً ممکنه بخواین ترتیب آیتم‌ها رو در موبایل با دسکتاپ متفاوت نشون بدین.

2. `flex-grow`: رشد کردن آیتم‌ها! 🌱

این خصوصیت تعیین می‌کنه که اگه فضای خالی در Main Axis وجود داشت، چقدر به هر آیتم اجازه رشد داده بشه. مقدار پیش‌فرضش 0 هست، یعنی هیچ رشدی نمی‌کنه. اگه به یه آیتم مقدار 1 بدیم، اون آیتم شروع به گرفتن فضای خالی می‌کنه. اگه به دو آیتم مقدار 1 بدیم، فضای خالی رو بین خودشون نصف می‌کنن. اگه به یکی 1 و به دیگری 2 بدیم، آیتمی که 2 گرفته، دو برابر آیتم دیگه فضا می‌گیره (نسبت 1:2).

.flex-container-grow {
  display: flex;
  flex-direction: row;
  background-color: #e8eaf6;
  padding: 10px;
  margin-bottom: 15px;
}

.flex-item-grow {
  height: 80px;
  background-color: #3f51b5;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  margin: 5px;
  border-radius: 5px;
}

.item-grow-1 { flex-grow: 1; background-color: #5c6bc0; } /* رشد می‌کنه */
.item-grow-2 { flex-grow: 3; background-color: #3f51b5; } /* سه برابر اولی رشد می‌کنه */
.item-grow-3 { flex-grow: 0; background-color: #283593; } /* رشد نمی‌کنه (پیش‌فرض) */

`flex-grow` عالیه وقتی می‌خواین یه آیتم خاص، مثلاً یه نوار کناری، همیشه فضای بیشتری بگیره یا یه دکمه همیشه به اندازه‌ی عرض باقی‌مونده کش بیاد.

3. `flex-shrink`: کوچک شدن آیتم‌ها! 🤏

این خصوصیت برعکس flex-grow عمل می‌کنه. وقتی فضای Main Axis کم باشه و آیتم‌ها جا نشن، flex-shrink تعیین می‌کنه که کدوم آیتم‌ها و چقدر باید کوچیک بشن تا توی اون فضا جا بشن. مقدار پیش‌فرضش 1 هست، یعنی همه‌ی آیتم‌ها به طور مساوی احتمال کوچک شدن دارن. اگه به آیتمی 0 بدیم، اون آیتم هیچ‌وقت کوچیک نمی‌شه و فضا رو اشغال می‌کنه (حتی اگه باعث بشه بقیه آیتم‌ها خیلی کوچیک بشن). مقادیر بزرگتر (مثلاً 2) یعنی اون آیتم بیشتر از بقیه تمایل به کوچک شدن داره.

.flex-container-shrink {
  display: flex;
  flex-direction: row;
  width: 400px; /* عرض محدود برای نمایش */
  background-color: #ede7f6;
  padding: 10px;
  margin-bottom: 15px;
}

.flex-item-shrink {
  height: 80px;
  background-color: #6200ea;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  margin: 5px;
  border-radius: 5px;
  /* عرض اولیه رو مشخص کنیم برای مثال */
  min-width: 150px; /* حداقل عرض */
}

.item-shrink-1 { flex-shrink: 1; background-color: #7c4dff; } /* کوچیک می‌شه */
.item-shrink-2 { flex-shrink: 0; background-color: #6200ea; } /* کوچیک نمی‌شه */
.item-shrink-3 { flex-shrink: 2; background-color: #4527a0; } /* دو برابر اولی کوچیک می‌شه */

`flex-shrink: 0` خیلی کاربردیه وقتی می‌خواین یه آیتم، مثلاً یه هدر ثابت یا یه دکمه مهم، همیشه اندازه‌ی خودش رو حفظ کنه و فضا رو اشغال کنه.

4. `flex-basis`: تعیین اندازه اولیه! 📏

خصوصیت flex-basis اندازه‌ی اولیه‌ی آیتم رو در Main Axis تعیین می‌کنه، قبل از اینکه flex-grow یا flex-shrink اعمال بشن. می‌تونه یه مقدار طول (مثل 100px)، درصد (مثل 50%) یا حتی کلماتی مثل auto (که اندازه خود عنصر رو در نظر می‌گیره) باشه.

**نکته:** اگه برای یه آیتم هم width (یا height در حالت ستونی) تعیین کنین و هم flex-basis، معمولاً flex-basis اولویت داره.

.flex-container-basis {
  display: flex;
  flex-direction: row;
  background-color: #c5cae9;
  padding: 10px;
  margin-bottom: 15px;
}

.flex-item-basis {
  height: 80px;
  background-color: #536dfe;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1em;
  margin: 5px;
}

.item-basis-1 {
  flex-basis: 150px; /* اندازه‌ی اولیه‌ی این آیتم 150 پیکسل */
  flex-grow: 1; /* و بعد اگه فضای خالی بود، رشد می‌کنه */
  background-color: #7c4dff;
}

.item-basis-2 {
  flex-basis: 100px; /* اندازه‌ی اولیه‌ی این آیتم 100 پیکسل */
  flex-shrink: 0; /* و کوچک نمی‌شه */
  background-color: #536dfe;
}

.item-basis-3 {
  flex-basis: auto; /* اندازه‌ی اولیه بر اساس محتوا یا width/height */
  background-color: #304ffe;
}

`flex-basis` مثل اینه که بگین “آیتم من اول اینقدر جا می‌خواد، بعد اگه شد، رشد کن یا اگه لازم شد، کوچیک شو”.

5. خلاصه: خصوصیت `flex`! 📝

به جای اینکه هر سه خصوصیت flex-grow، flex-shrink و flex-basis رو جدا جدا بنویسیم، می‌تونیم از شورت‌هند (مخفف) خصوصیت flex استفاده کنیم:

flex: ;

مقادیر رایج:

• `flex: 0 1 auto;` (پیش‌فرض): رشد نمی‌کنه، ولی کوچک می‌شه، اندازه‌ی پایه خودشه.
• `flex: 1;` (مخفف `flex: 1 1 0%;`): همه آیتم‌ها به طور مساوی رشد می‌کنن، کوچک می‌شن و اندازه‌ی اولیه‌ی صفر دارن (یعنی تمام فضای خالی رو به طور مساوی تقسیم می‌کنن).
• `flex: auto;` (مخفف `flex: 1 1 auto;`): رشد می‌کنه، کوچک می‌شه، و اندازه‌ی اولیه‌ی خودش رو داره.
• `flex: none;` (مخفف `flex: 0 0 auto;`): رشد نمی‌کنه، کوچک نمی‌شه، و اندازه‌ی اولیه‌ی خودش رو داره.

.flex-item-shorthand {
  flex: 1 1 150px; /* معادل flex-grow: 1; flex-shrink: 1; flex-basis: 150px; */
  height: 80px;
  background-color: #303f9f; /* یه رنگ پایه */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
.flex-item-shorthand-auto {
  flex: auto; /* معادل flex: 1 1 auto; */
  height: 80px;
  background-color: #536dfe;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

با تسلط بر این خصوصیات آیتم‌ها، شما کنترل کاملی بر نحوه‌ی نمایش، اندازه و ترتیب عناصر در Flexbox پیدا می‌کنید. این ابزارها، ساخت Layoutهای پیچیده و واکنش‌گرا رو مثل آب خوردن می‌کنن! ادامه بدین و بدرخشین! ✨