CSS Flexbox

Flexbox یا Flexible Box Layout روشی در CSS هست که برای ساخت layout‌های انعطاف‌پذیر و responsive استفاده میشه.
با Flexbox می‌تونی خیلی راحت عناصر رو در یک ردیف یا ستون بچینی، وسط‌چین کنی، فاصله‌ها رو کنترل کنی و …

🔹 فعال کردن Flexbox

برای فعال شدن Flexbox کافیه روی یک container خاص دستور زیر رو بدی:

.container {
  display: flex;
}

حالا همه‌ی child ها (فرزندان مستقیم) داخلش به صورت flex item عمل می‌کنن.

🔹 ویژگی‌های مهم Flexbox

1. flex-direction (جهت قرار گرفتن آیتم‌ها)

.container {
  display: flex;
  flex-direction: row;       /* پیش‌فرض: ردیفی افقی */
  flex-direction: column;    /* ستونی عمودی */
  flex-direction: row-reverse;
  flex-direction: column-reverse;
}

2. justify-content (چینش افقی آیتم‌ها)

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

3. align-items (چینش عمودی آیتم‌ها)

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

4. flex-wrap (شکستن خط)

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

5. align-content (چینش چند خطی)

فقط وقتی کار می‌کنه که wrap فعال باشه.

.container {
  display: flex;
  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 (روی فرزندها)

1. order (ترتیب نمایش)

.item1 { order: 1; }
.item2 { order: 2; }
.item3 { order: -1; } /* میاد جلوتر */

2. flex-grow (بزرگ شدن)

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; } /* دو برابر فضا می‌گیره */

3. flex-shrink (کوچک شدن)

.item1 { flex-shrink: 1; } /* پیش‌فرض */
.item2 { flex-shrink: 0; } /* اصلاً کوچیک نشه */

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

.item1 { flex-basis: 200px; } /* مثل min-width */

5. align-self (چینش آیتم تکی)

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

🔹 مثال ساده Flexbox

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 200px;
      background: lightblue;
    }
    .item {
      background: coral;
      padding: 20px;
      color: white;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">باکس 1</div>
    <div class="item">باکس 2</div>
    <div class="item">باکس 3</div>
  </div>
</body>
</html>