Flexbox یکی از مهم‌ترین ویژگی‌های CSS است که برای طراحی چیدمان‌های انعطاف‌پذیر و واکنش‌گرا استفاده می‌شود.

با کمک Flexbox، می‌توان به‌راحتی عناصر را در جهت‌های مختلف (افقی و عمودی) تنظیم کرد و از قابلیت‌هایی مانند چینش خودکار، توزیع فاصله‌ها و هم‌راستاسازی آیتم‌ها بهره برد.

۱. Flexbox چیست؟

Flexbox یا “Flexible Box Layout” یک روش جدید برای تنظیم چینش عناصر در صفحه است که به‌طور خاص برای حل مشکلات رایج در طراحی رابط‌های کاربری مدرن توسعه داده شده است. این روش به شما اجازه می‌دهد تا کنترل بهتری روی نحوه توزیع و تراز عناصر داشته باشید.

۲. نحوه فعال‌سازی Flexbox

برای استفاده از Flexbox، کافی است خاصیت display: flex; را روی عنصر والد (container) اعمال کنید.

.container {
    display: flex;
}

با این کار، تمام عناصر فرزند این والد به‌صورت انعطاف‌پذیر در کنار یکدیگر قرار می‌گیرند.

۳. خصوصیات مهم در Flexbox

Flexbox دارای دو بخش اصلی است:

Container (والد): عنصری که display: flex; روی آن اعمال می‌شود.
Items (فرزندان): عناصری که داخل کانتینر قرار دارند و طبق قوانین Flexbox چیدمان می‌شوند.

الف) خصوصیات مربوط به Container

۱. flex-direction: تعیین جهت چینش آیتم‌ها

row (پیش‌فرض): از چپ به راست
row-reverse: از راست به چپ
column: از بالا به پایین
column-reverse: از پایین به بالا

.container {
    display: flex;
    flex-direction: row; /* یا column, row-reverse, column-reverse */
}

۲. justify-content: تعیین نحوه توزیع آیتم‌ها در محور اصلی

flex-start: شروع از ابتدای محور
flex-end: انتهای محور
center: وسط محور
space-between: فاصله برابر بین آیتم‌ها
space-around: فاصله برابر در اطراف آیتم‌ها
space-evenly: فاصله کاملاً مساوی

.container {
    display: flex;
    justify-content: center; /* یا flex-start, flex-end, space-between, ... */
}

۳. align-items: تنظیم چیدمان آیتم‌ها در محور متقاطع

stretch (پیش‌فرض): کشیده شدن به اندازه کانتینر
flex-start: ابتدای محور
flex-end: انتهای محور
center: وسط محور
baseline: تراز کردن بر اساس خط پایه متن

.container {
    display: flex;
    align-items: center; /* یا flex-start, flex-end, stretch, baseline */
}

ب) خصوصیات مربوط به Items

۱. flex-grow: تعیین میزان گسترش یک آیتم نسبت به بقیه آیتم‌ها

.item {
    flex-grow: 1; /* آیتم به اندازه فضای باقی‌مانده رشد می‌کند */
}

۲. flex-shrink: تعیین میزان کوچک شدن آیتم‌ها در صورت کمبود فضا

.item {
    flex-shrink: 1; /* آیتم اجازه کوچک شدن دارد */
}

۳. flex-basis: تعیین اندازه اولیه آیتم

.item {
    flex-basis: 200px; /* آیتم ابتدا ۲۰۰ پیکسل خواهد بود */
}

۴. align-self: تغییر هم‌راستاسازی یک آیتم خاص

.item {
    align-self: flex-end; /* این آیتم خاص در انتهای محور متقاطع قرار می‌گیرد */
}

۴. نتیجه‌گیری

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