راهنمای جامع Flexbox در CSS
✅ Flexbox چیست؟
Flexbox یک سیستم قدرتمند چیدمان در CSS است که طراحی صفحات وب را بسیار ساده‌تر می‌کند. با استفاده از Flexbox می‌توان المان‌ها را:
- به‌راحتی وسط‌چین کرد (عمودی یا افقی)
- بین آن‌ها فاصله‌گذاری مساوی ایجاد کرد
- المان‌ها را به ابتدای یا انتهای کانتینر چسباند
- ترتیب نمایش المان‌ها را بدون تغییر در HTML تغییر داد
- چیدمان را ریسپانسیو و منعطف کرد
Flexbox به شما کمک می‌کند چیدمان المان‌ها را بدون نیاز به float یا position پیچیده، به شکلی ساده مدیریت کنید.
چطور Flexbox را فعال کنیم؟
برای شروع استفاده از Flexbox باید روی المان والد (کانتینر) خاصیت display: flex را اعمال کنید. تمام فرزندان مستقیم این المان، تبدیل به flex item می‌شوند.
مثال:
.container {
display: flex;
}
ویژگی‌های اصلی Flexbox
✅ display: flex
اصلی‌ترین دستور Flexbox است که المان والد را به یک flex container تبدیل می‌کند.
جهت چیدمان المان‌ها: flex-direction
با خاصیت flex-direction مشخص می‌کنید المان‌های درون کانتینر در چه جهتی چیده شوند:
- row → المان‌ها افقی از چپ به راست (پیش‌فرض)
- row-reverse → افقی از راست به چپ
- column → عمودی از بالا به پایین
- column-reverse → عمودی از پایین به بالا
مثال:
.container {
display: flex;
flex-direction: row;
}
توزیع فضای افقی: justify-content
justify-content مشخص می‌کند المان‌ها در محور اصلی (main axis) چگونه قرار بگیرند:
- flex-start → چسبیده به ابتدای کانتینر
- flex-end → چسبیده به انتهای کانتینر
- center → وسط کانتینر
- space-between → فاصله مساوی بین المان‌ها (ابتدا و انتها بدون فاصله)
- space-around → فاصله مساوی اطراف هر المان
- space-evenly → فاصله مساوی بین المان‌ها و اطراف آن‌ها
مثال:
.container {
display: flex;
justify-content: center;
}
چیدمان عمودی: align-items
align-items موقعیت المان‌ها را در محور عمود بر اصلی (cross axis) کنترل می‌کند. مقادیر پرکاربرد:
- stretch → المان‌ها ارتفاع کل کانتینر را پر می‌کنند (پیش‌فرض)
- flex-start → المان‌ها به بالا چسبیده‌اند
- flex-end → المان‌ها به پایین چسبیده‌اند
- center → المان‌ها در وسط محور عمودی قرار می‌گیرند
- baseline → خطوط متن المان‌ها هم‌تراز می‌شود
مثال:
.container {
display: flex;
align-items: center;
}
چیدمان چند ردیف: flex-wrap و align-content
flex-wrap
flex-wrap تعیین می‌کند اگر جای کافی نباشد، المان‌ها به خط بعدی بروند یا خیر:
- nowrap → همه المان‌ها در یک خط می‌مانند (پیش‌فرض)
- wrap → المان‌ها به خط بعدی می‌روند
- wrap-reverse → المان‌ها در جهت معکوس به خط بعدی می‌روند
مثال:
.container {
display: flex;
flex-wrap: wrap;
}
align-content
وقتی المان‌ها به چند خط می‌روند، align-content فاصله بین ردیف‌ها را کنترل می‌کند. این ویژگی فقط زمانی عمل می‌کند که flex-wrap فعال باشد و کانتینر چند خط داشته باشد.
مقادیر پرکاربرد:
- flex-start → ردیف‌ها در بالا جمع می‌شوند
- flex-end → ردیف‌ها در پایین جمع می‌شوند
- center → ردیف‌ها در وسط کانتینر قرار می‌گیرند
- space-between → فاصله مساوی بین ردیف‌ها (بالا و پایین بدون فاصله)
- space-around → فاصله مساوی اطراف ردیف‌ها
- space-evenly → فاصله مساوی بین ردیف‌ها و اطرافشان
- stretch → ردیف‌ها تمام ارتفاع کانتینر را پر می‌کنند
فاصله‌گذاری بین آیتم‌ها: gap
Flexbox به شما امکان می‌دهد بدون marginهای اضافه، بین آیتم‌ها فاصله ایجاد کنید:
.container {
display: flex;
gap: 20px;
}
کنترل سایز آیتم‌ها
flex-grow
flex-grow تعیین می‌کند هر آیتم چه مقدار از فضای اضافه کانتینر را بگیرد. اگر همه آیتم‌ها flex-grow: 1 داشته باشند، فضای اضافه به‌طور مساوی بین آن‌ها تقسیم می‌شود.
flex-shrink
flex-shrink مشخص می‌کند آیتم در صورت کمبود فضا چقدر کوچک شود. مقدار پیش‌فرض 1 است یعنی المان اجازه دارد کوچک شود. اگر 0 باشد، المان کوچک نمی‌شود.
flex-basis
flex-basis اندازه اولیه آیتم را مشخص می‌کند، قبل از توزیع فضای اضافه یا کمبود فضا. می‌تواند واحدی مثل px یا % باشد.
مثال:
.item {
flex-basis: 200px;
}
فرق flex-grow و flex-basis
flex-basis→ سایز پایه المان استflex-grow→ فضای اضافه بین آیتم‌ها را تقسیم می‌کند
تغییر ترتیب آیتم‌ها: order
با ویژگی order می‌توانید بدون تغییر HTML، ترتیب المان‌ها را تغییر دهید. پیش‌فرض همه آیتم‌ها order: 0 است. هرچه عدد کمتر باشد، زودتر نمایش داده می‌شود.
مثال:
.item {
order: 2;
}
ترکیب flex-grow و flex-basis
مثلاً:
.item {
flex-basis: 200px;
flex-grow: 1;
}
→ آیتم حداقل 200px است، اما اگر فضای اضافه باشد، رشد می‌کند.
قانون طلایی برای طراحی ریسپانسیو
flex-grow را روی 1 بگذار وقتی می‌خواهی آیتم‌ها به‌طور مساوی فضای خالی را تقسیم کنند.
مثال کامل Flexbox
HTML
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
</div>
CSS بدون grow
.container {
display: flex;
width: 800px;
}
.item {
width: 200px;
background: orange;
}
→ جمع عرض دو آیتم = 400px → 400px فضای خالی باقی می‌ماند.
CSS با flex-grow
.item {
flex-grow: 1;
}
→ آیتم‌ها فضای خالی را بین خود تقسیم می‌کنند.
محاسبه flex-grow
سهم هر آیتم = (flex-grow آن آیتم / مجموع flex-grow همه آیتم‌ها) × فضای خالی
مثال عددی:
- .item1 → flex-grow: 1
- .item2 → flex-grow: 3
- فضای خالی → 400px
→ سهم .item1 = (1/4) × 400 = 100px
→ سهم .item2 = (3/4) × 400 = 300px
→ آیتم دوم سه برابر آیتم اول رشد می‌کند!
خلاصه ویژگی‌های Flexbox
| ویژگی | توضیح |
|---|---|
| display | flex کانتینر را فعال می‌کند |
| flex-direction | جهت چیدمان آیتم‌ها |
| justify-content | چیدمان آیتم‌ها در محور اصلی |
| align-items | چیدمان آیتم‌ها در محور عمود |
| align-content | فاصله‌گذاری خطوط در چند ردیف |
| flex-wrap | شکستن آیتم‌ها به چند خط |
| gap | فاصله بین آیتم‌ها |
| flex-grow | رشد آیتم در فضای اضافه |
| flex-shrink | کوچک شدن آیتم در فضای کم |
| flex-basis | اندازه اولیه آیتم |
| order | تغییر ترتیب آیتم‌ها بدون تغییر HTML |
✅ جمع‌بندی
Flexbox ابزاری قدرتمند است که چیدمان‌های پیچیده را با ساده‌ترین کد ممکن انجام می‌دهد. اگر می‌خواهی صفحات واکنش‌گرا و حرفه‌ای بسازی، Flexbox یکی از مهم‌ترین مهارت‌هایی است که باید بلد باشی.