آموزش Flexbox در CSS: راهنمای کامل برای طراحان وب ۲۰۲۵

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

Flexbox چیست؟

Flexbox یا Flexible Box Layout یه مدل چیدمان CSS هست که به شما اجازه می‌ده المان‌ها رو به صورت ریسپانسیو و انعطاف‌پذیر در یه محور (row یا column) چیدمان کنید. این روش جایگزین روش‌های قدیمی مثل float و table شده.

مزایای Flexbox

• چیدمان ریسپانسیو بدون نیاز به media query
• ترازبندی افقی و عمودی آسان
• توزیع فضا بین المان‌ها به صورت خودکار
• تغییر ترتیب المان‌ها بدون تغییر HTML
• سازگاری کامل با همه مرورگرها

مفاهیم پایه Flexbox

Flex Container و Flex Items

برای استفاده از Flexbox، باید یه المان والد رو به flex container تبدیل کنید:

.container {
  display: flex;
}

المان‌های فرزند این container به طور خودکار flex items می‌شن.

محور اصلی (Main Axis) و محور متقاطع (Cross Axis)

Flexbox در دو محور کار می‌کنه:

• Main Axis: محور اصلی چیدمان (افقی یا عمودی)
• Cross Axis: محور متقاطع که عمود بر محور اصلی هست

ویژگی‌های Flex Container

۱. flex-direction

جهت چیدمان المان‌ها رو تعیین می‌کنه:

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

۲. justify-content

ترازبندی المان‌ها در محور اصلی:

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

۳. align-items

ترازبندی المان‌ها در محور متقاطع:

.container {
  align-items: stretch;     /* کشش به ارتفاع container */
  align-items: flex-start;  /* شروع محور متقاطع */
  align-items: flex-end;    /* پایان محور متقاطع */
  align-items: center;      /* وسط محور متقاطع */
  align-items: baseline;    /* تراز با خط پایه متن */
}

۴. flex-wrap

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

.container {
  flex-wrap: nowrap;       /* یه خط (پیش‌فرض) */
  flex-wrap: wrap;         /* شکست خط */
  flex-wrap: wrap-reverse; /* شکست خط معکوس */
}

۵. gap

فاصله بین المان‌های flex:

.container {
  gap: 20px;              /* فاصله افقی و عمودی */
  row-gap: 15px;          /* فاصله بین ردیف‌ها */
  column-gap: 25px;       /* فاصله بین ستون‌ها */
}

ویژگی‌های Flex Items

۱. flex-grow

نسبت رشد یه المان نسبت به بقیه:

.item {
  flex-grow: 1;  /* المان فضا رو پر می‌کنه */
  flex-grow: 2;  /* دو برابر بقیه رشد می‌کنه */
}

۲. flex-shrink

نسبت جمع‌شدن یه المان وقتی فضا کم باشه:

.item {
  flex-shrink: 0;  /* جمع نمی‌شه */
  flex-shrink: 1;  /* جمع می‌شه (پیش‌فرض) */
}

۳. flex-basis

اندازه اولیه یه المان:

.item {
  flex-basis: 200px;   /* عرض اولیه ۲۰۰ پیکسل */
  flex-basis: auto;    /* بر اساس محتوا */
  flex-basis: 50%;     /* ۵۰ درصد	container */
}

۴. shorthand: flex

.item {
  flex: 1 0 200px;  /* grow | shrink | basis */
}

۵. align-self

ترازبندی یه المان خاص که از container رو نقض می‌کنه:

.item {
  align-self: center;  /* فقط این المان وسط چین */
}

مثال عملی: Navbar ریسپانسیو

مثال: کارت‌های ریسپانسیو با flex-wrap

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.card {
  flex: 1 1 300px;
  max-width: 350px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Flexbox در برابر Grid

سوالات متداول

۱. Flexbox بهتره یا Grid؟

بستگی به نیاز داره. برای چیدمان‌های یک‌بعدی مثل navbar و منو، Flexbox بهتره. برای چیدمان‌های دو‌بعدی مثل layout کل صفحه، Grid مناسب‌تره.

۲. آیا Flexbox در همه مرورگرها کار می‌کنه؟

بله، Flexbox در تمام مرورگرهای مدرن پشتیبانی می‌شه. حتی IE11 هم پشتیبانی محدود داره.

۳. چطور با Flexbox وسط‌چین کنم؟

کافیه از display: flex; justify-content: center; align-items: center; روی container استفاده کنید.

جمع‌بندی

Flexbox یه ابزار قدرتمند برای چیدمان ریسپانسیو در CSS هست که طراحی رو ساده می‌کنه. برای یادگیری بیشتر Container Queries و طراحی ریسپانسیو رو هم بخونید.