CSS Flex Container

📦 Flex Container چیست؟

Flex Container همان عنصری است که ویژگی `display: flex` (یا `inline-flex`) به آن داده شده است و فرزندان مستقیم آن به صورت فلکس آیتم (flex items) رفتار می‌کنند

این کانتینر تعیین می‌کند که فرزندانش چگونه در محورهای افقی یا عمودی قرار بگیرند و چطور فضای داخل کانتینر بین آن‌ها تقسیم شود.

—

⚙️ ایجاد یک Flex Container

برای تعریف یک عنصر به عنوان Flex Container، کافی است CSS زیر را روی آن اعمال کنید:

“`css
.container {
display: flex;
/* یا */
display: inline-flex;
}
“`

* `display: flex` باعث می‌شود عنصر به صورت **بلوک فلکس** رفتار کند (یعنی مثل یک بلاک معمولی که عرض کل را می‌گیرد).
* `display: inline-flex` باعث می‌شود عنصر به صورت **درون‌خطی فلکس** رفتار کند (شبیه به span یا متن).

—

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

1. flex-direction

جهت چینش آیتم‌ها را مشخص می‌کند.

* `row` (پیش‌فرض): چیدمان افقی از چپ به راست
* `row-reverse`: چیدمان افقی از راست به چپ
* `column`: چیدمان عمودی از بالا به پایین
* `column-reverse`: چیدمان عمودی از پایین به بالا

—

2. flex-wrap

کنترل می‌کند که آیا آیتم‌ها در یک خط بمانند یا به خطوط بعدی بروند.

* `nowrap` (پیش‌فرض): همه آیتم‌ها در یک خط
* `wrap`: آیتم‌ها در صورت کمبود فضا به خط بعدی می‌روند
* `wrap-reverse`: همان `wrap` ولی خطوط به صورت معکوس نمایش داده می‌شوند

—

3. justify-content

ترازبندی آیتم‌ها در جهت اصلی (معمولاً افقی)

مقدارهای رایج:

* `flex-start` (پیش‌فرض): آیتم‌ها از ابتدا چیده می‌شوند
* `flex-end`: آیتم‌ها به انتها می‌روند
* `center`: آیتم‌ها وسط چین می‌شوند
* `space-between`: فاصله مساوی بین آیتم‌ها، اول و آخر چسبیده به لبه‌ها
* `space-around`: فاصله مساوی بین آیتم‌ها با فاصله نصفی در ابتدا و انتها
* `space-evenly`: فاصله مساوی در تمام جهات

—

4. align-items

ترازبندی آیتم‌ها در جهت عمودی (محور فرعی)

* `stretch` (پیش‌فرض): آیتم‌ها در ارتفاع کانتینر کشیده می‌شوند
* `flex-start`: آیتم‌ها به بالا تراز می‌شوند
* `flex-end`: آیتم‌ها به پایین تراز می‌شوند
* `center`: وسط چین عمودی
* `baseline`: تراز بر اساس خط مبنا (معمولاً برای متن)

—

5. align-content

برای زمانی که آیتم‌ها چند خط دارند (وقتی `flex-wrap` فعال است)، تعیین می‌کند که خطوط چطور در جهت عمودی یا عرضی (بسته به جهت کانتینر) تراز شوند.

—

6. gap

فاصله بین آیتم‌ها را تعیین می‌کند (مثل margin ولی ساده‌تر و با کنترل بهتر)

“`css
.container {
display: flex;
gap: 20px;
}
“`

—

🖼️ مثال کامل

“`html
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
gap: 15px;
height: 150px;
background-color: #f0f0f0;
}

.item {
background: #4caf50;
color: white;
padding: 20px;
border-radius: 6px;
flex: 1 1 100px; /* رشد و جمع شدن و پایه */
text-align: center;
}
</style>

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