CSS Flex Container

وقتی یک عنصر پدر (container) رو display: flex یا display: inline-flex بدی، اون عنصر تبدیل به Flex Container میشه و تمام فرزندان مستقیمش تبدیل به Flex Items میشن.

🔹 فعال کردن Flex Container

.container {
  display: flex;        /* Container بلوکی */
  display: inline-flex; /* Container درون‌خطی */
}

🔹 ویژگی‌های Flex Container

1. flex-direction → تعیین جهت اصلی آیتم‌ها

.container {
  flex-direction: row;          /* پیش‌فرض: از چپ به راست */
  flex-direction: row-reverse;  /* از راست به چپ */
  flex-direction: column;       /* بالا به پایین */
  flex-direction: column-reverse; /* پایین به بالا */
}

2. flex-wrap → اجازه شکستن خط

.container {
  flex-wrap: nowrap;   /* پیش‌فرض: همه در یک خط */
  flex-wrap: wrap;     /* اگر جا نشد، بره خط بعد */
  flex-wrap: wrap-reverse; /* خط بعد ولی برعکس */
}

3. flex-flow → ترکیب flex-direction و flex-wrap

.container {
  flex-flow: row wrap;   /* افقی + شکستن خط */
}

4. justify-content → ترازبندی افقی آیتم‌ها (روی محور اصلی)

.container {
  justify-content: flex-start;   /* سمت چپ */
  justify-content: flex-end;     /* سمت راست */
  justify-content: center;       /* وسط */
  justify-content: space-between;/* فاصله مساوی بین آیتم‌ها */
  justify-content: space-around; /* فاصله مساوی اطراف آیتم‌ها */
  justify-content: space-evenly; /* فاصله کاملاً مساوی */
}

5. align-items → ترازبندی عمودی آیتم‌ها (روی محور متقاطع)

.container {
  align-items: stretch;    /* پیش‌فرض: کشیده میشه */
  align-items: flex-start; /* بالای Container */
  align-items: flex-end;   /* پایین Container */
  align-items: center;     /* وسط Container */
  align-items: baseline;   /* بر اساس خط متن */
}

6. align-content → ترازبندی خطوط متعدد (فقط وقتی wrap روشن باشه)

.container {
  flex-wrap: wrap;
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}

🔹 مثال: Flex Container در عمل

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Flex Container Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      height: 300px;
      background: lightblue;
    }
    .item {
      background: coral;
      padding: 20px;
      margin: 5px;
      color: white;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">آیتم 1</div>
    <div class="item">آیتم 2</div>
    <div class="item">آیتم 3</div>
    <div class="item">آیتم 4</div>
  </div>
</body>
</html>

✨ خلاصه:
Flex Container همون پدره که با display: flex ساخته میشه و کنترل کامل روی جهت، فاصله و ترازبندی آیتم‌ها داره.