Flexbox

ویژگی **Flexbox** در CSS یکی از قدرتمندترین ابزارها برای **چیدمان عناصر در صفحات وب** است. این سیستم به شما اجازه می‌دهد عناصر را در یک ردیف یا ستون بچینید، فاصله بین آن‌ها را تنظیم کنید، آن‌ها را تراز کنید و حتی نحوه جمع شدن یا کش آمدن آن‌ها را کنترل کنید — بدون نیاز به float یا positioning پیچیده.

—

 📦 Flexbox چیست؟

Flexbox مخفف **Flexible Box Layout** است و برای **چیدمان یک‌بعدی** طراحی شده؛ یعنی یا در **محور افقی (row)** یا **محور عمودی (column)**.

—

## ✅ فعال کردن Flexbox

برای فعال کردن Flexbox، کافی‌ست به **عنصر والد** (container) این ویژگی را بدهید:

“`css
.container {
display: flex;
}
“`

—

 🧱 اجزای Flexbox

1. عنصر والد (Flex Container)

عنصری که `display: flex` یا `display: inline-flex` دارد.

 2. عناصر فرزند (Flex Items)

تمام عناصر مستقیمی که درون flex container قرار دارند.

—

 🎯 ویژگی‌های مهم Flex Container

| ویژگی                                 | توضیح |
| —————–     | ———————————————————————————————————- |
| `flex-direction`   |   جهت چینش: `row` (پیش‌فرض)، `row-reverse`, `column`, `column-reverse` |
| `justify-content` | ترازبندی افقی آیتم‌ها: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly` |
| `align-items`      | ترازبندی عمودی: `stretch` (پیش‌فرض), `flex-start`, `flex-end`, `center`, `baseline` |
| `align-content`   | ترازبندی خطوط وقتی چند خط وجود دارد (مثل wrap شدن آیتم‌ها) |
| `flex-wrap`        | آیا آیتم‌ها در چند خط قرار بگیرند یا نه: `nowrap`, `wrap`, `wrap-reverse` |
| `gap`                | فاصله بین آیتم‌ها |

—

🔧 ویژگی‌های مهم Flex Items

| ویژگی               |  توضیح |
| ————-        | ——————————————————- |
| `order`            | ترتیب نمایش آیتم (به صورت عددی) |
| `flex-grow`      | میزان رشد آیتم وقتی فضای اضافه وجود دارد |
| `flex-shrink`    | میزان جمع شدن آیتم وقتی فضا کم است |
| `flex-basis`     | اندازه اولیه آیتم قبل از توزیع فضا |
| `flex` |      shorthand برای `flex-grow`, `flex-shrink`, `flex-basis` |
| `align-self`      | ترازبندی یک آیتم خاص (overrides align-items) |

—

 🖼️ مثال ساده

“`html
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
background: #eee;
}

.item {
background: #3498db;
color: white;
padding: 10px 20px;
border-radius: 4px;
}
</style>

<div class=“container”>
<div class=“item”>آیتم ۱</div>
<div class=“item“>آیتم ۲</div>
<div class=“item”>آیتم ۳</div>
</div>
“`

—

 📚 خلاصه

| کاری که می‌خواهید انجام دهید            | ویژگی مورد نیاز |
| ———————————              | ———————– |
| تنظیم ردیفی یا ستونی بودن آیتم‌ها      | `flex-direction` |
| ترازبندی افقی                                  | `justify-content` |
| ترازبندی عمودی                               | `align-items` |
| ایجاد فاصله بین آیتم‌ها                       | `gap` |
| انتقال آیتم خاص به سمت دیگر            | `order` یا `align-self` |