CSS Flex Items

🔹 1. order → ترتیب آیتم‌ها

به‌صورت پیش‌فرض همه آیتم‌ها order: 0 دارن. می‌تونی با تغییر عدد، ترتیب رو کنترل کنی.

.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }

👉 عدد کوچیک‌تر → جلوتر
👉 ترتیب HTML دیگه مهم نیست.

🔹 2. flex-grow → میزان رشد آیتم

این ویژگی میگه وقتی جا اضافه هست، آیتم چقدر بزرگ بشه.

.item1 { flex-grow: 1; } /* می‌تونه رشد کنه */
.item2 { flex-grow: 2; } /* دو برابر آیتم1 رشد می‌کنه */
.item3 { flex-grow: 0; } /* اصلاً رشد نمی‌کنه (پیش‌فرض) */

🔹 3. flex-shrink → میزان جمع شدن آیتم

این ویژگی میگه وقتی جا کم هست، آیتم چقدر کوچیک بشه.

.item1 { flex-shrink: 1; } /* می‌تونه جمع بشه (پیش‌فرض) */
.item2 { flex-shrink: 0; } /* اصلاً جمع نشه */

🔹 4. flex-basis → اندازه اولیه آیتم

اندازه قبل از اعمال grow و shrink.

.item1 { flex-basis: 200px; }
.item2 { flex-basis: 50%; }
.item3 { flex-basis: auto; } /* اندازه محتوا (پیش‌فرض) */

🔹 5. flex → ترکیب grow, shrink, basis

.item {
  flex: 1 1 150px; /* grow | shrink | basis */
}

.item2 {
  flex: 2; /* یعنی flex-grow: 2; flex-shrink: 1; flex-basis: 0; */
}

🔹 6. align-self → ترازبندی آیتم خاص

بر خلاف align-items که روی همه آیتم‌ها اعمال میشه، این ویژگی فقط یک آیتم رو تنظیم می‌کنه.

.item1 { align-self: flex-start; }
.item2 { align-self: flex-end; }
.item3 { align-self: center; }
.item4 { align-self: stretch; }

🔹 مثال کامل

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Flex Items Example</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background: lightblue;
    }
    .item {
      background: coral;
      margin: 5px;
      padding: 20px;
      color: white;
      font-size: 18px;
    }
    .item1 { flex: 1; }          /* رشد می‌کنه */
    .item2 { flex: 2; }          /* دو برابر رشد می‌کنه */
    .item3 { flex: 1 0 100px; }  /* پایه 100px، جمع نشه */
    .item4 { align-self: flex-end; } /* پایین قرار بگیره */
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">آیتم 1</div>
    <div class="item item2">آیتم 2</div>
    <div class="item item3">آیتم 3</div>
    <div class="item item4">آیتم 4</div>
  </div>
</body>
</html>

✨ خلاصه:

  • order → ترتیب آیتم‌ها

  • flex-grow → رشد در فضای خالی

  • flex-shrink → جمع شدن در فضای کم

  • flex-basis → اندازه پایه

  • flex → ترکیب سه‌تایی بالا

  • align-self → ترازبندی فقط یک آیتم