آموزش flexbox در css

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

فهرست مطالب

• Flexbox چیست و چگونه کار می‌کند؟
• مفهوم محور اصلی (Main Axis) و محور متقاطع (Cross Axis)
• ویژگی‌های کانتینر (Flex Container)
• ویژگی‌های آیتم‌ها (Flex Items)
• جدول خلاصه ویژگی‌های Flexbox
• سناریوهای کاربردی در دنیای واقعی
• نکات تخصصی و رفتار Flexbox در زبان‌های راست‌به‌چپ (RTL)
• پرسش‌های متداول
• عیب‌یابی سریع مشکلات شایع

Flexbox چیست و چگونه کار می‌کند؟

فلكس‌بكس (Flexbox) یا Flexible Box Layout یک مدل چیدمان یک‌بعدی در CSS است که امکان توزیع فضای خالی، تراز کردن عناصر و کنترل ترتیب نمایش آن‌ها را به صورت خودکار و بدون نیاز به محاسبات شناور (Float) یا موقعیت‌دهی مطلق (Absolute) فراهم می‌کند.

قبل از معرفی Flexbox، ساختن قالب‌های چندستونه یا تراز کردن یک عنصر در مرکز صفحه از عمده‌ترین چالش‌های طراحان وب بود. استفاده از float، inline-block یا table دردسرهای زیادی مثل عدم یکسان‌سازی ارتفاع کارت‌ها یا بهم‌ریختگی در صفحات موبایل ایجاد می‌کرد. Flexbox طوری طراحی شده که به عناصر اجازه می‌دهد بر اساس اندازه صفحه نمایش، متراکم یا باز شوند تا بهترین استفاده را از فضای موجود ببرند.

ساختار فلکس‌بکس همواره از دو بخش اصلی تشکیل می‌شود: Flex Container (عنصر والد) و Flex Items (عناصر فرزند). تمام فرآیند چیدمان با اعمال دستور display: flex روی عنصر والد آغاز می‌شود. اگر قصد دارید کدهای پایه HTML را قبل از اعمال استایل بازبینی کنید، می‌توانید از قطعه کدهای HTML استاندارد استفاده کنید.

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

برای درک عمیق Flexbox، باید درک درستی از دو محور مختصات آن داشته باشید. برخلاف مدل سنتی که بر پایه ابعاد افقی و عمودی فیزیکی کار می‌کرد، فلكس‌بكس بر اساس محورهای جهتی عمل می‌کند:

ویژگی‌های کانتینر (Flex Container)

ویژگی‌های والد وظیفه کنترل کلی ساختار، جهت‌دهی، فاصله‌گذاری و تراز کلی عناصر فرزند را بر عهده دارند. برای استفاده بیشتر از کدهای استایل می‌توانید مجموعه تکه‌کدهای CSS را نیز بررسی کنید.

۱. ویژگی display

این دستور نقطه شروع فلكس‌بكس است و عنصر والد را به یک کانتینر فلکس تبدیل می‌کند:

.container {
  display: flex; /* یا inline-flex برای رفتار این‌لاین */
}

۲. ویژگی flex-direction

جهت محور اصلی را تعیین می‌کند و مشخص می‌سازد آیتم‌ها به صورت افقی چیده شوند یا عمودی:

• row (پیش‌فرض): چیدمان افقی از راست به چپ (در سند RTL) یا چپ به راست (در LTR).
• row-reverse: چیدمان افقی در جهت عکس.
• column: چیدمان عمودی از بالا به پایین.
• column-reverse: چیدمان عمودی از پایین به بالا.

۳. ویژگی flex-wrap

به صورت پیش‌فرض، فلكس‌بكس تلاش می‌کند تمام عناصر را در یک خط جای دهد (حتی اگر مجبور به فشردن آن‌ها شود). با این دستور مشخص می‌کنید که آیا عناصر اجازه رفتن به خط بعدی را دارند یا خیر:

.container {
  flex-wrap: nowrap; /* پیش‌فرض: همه در یک خط */
  /* مقادیر دیگر: wrap | wrap-reverse */
}

۴. ترکیبی flex-flow

یک شورت‌هند (Shorthand) کاربردی برای ترکیب دو ویژگی flex-direction و flex-wrap است:

.container {
  flex-flow: row wrap; /* جهت افقی همراه با شكستن به خط بعد */
}

۵. ویژگی justify-content

ویژگی justify-content طرز توزیع فضای خالی اضافی را در امتداد «محور اصلی» (Main Axis) مشخص می‌کند و گزینه‌هایی مثل چسباندن به ابتدا، انتها، مرکز یا پخش متناسب فواصل را فراهم می‌سازد.

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

۶. ویژگی align-items

تراز عناصر را در امتداد «محور متقاطع» (Cross Axis) مشخص می‌کند:

• stretch (پیش‌فرض): ارتفاع یا عرض عناصر کشیده می‌شود تا تمام کانتینر را پر کند.
• flex-start: تراز در شروع محور متقاطع.
• flex-end: تراز در پایان محور متقاطع.
• center: قرارگیری در مرکز محور متقاطع.
• baseline: تراز شدن عناصر بر اساس خط کرسی متن (Baseline) آن‌ها.

۷. ویژگی gap (فاصله‌گذاری جدید)

ویژگی gap (به همراه row-gap و column-gap) نیاز به استفاده از مارجین‌های منفی در کانتینر را کلاً از بین برده است. این دستور بدون دستکاری لبه‌های بیرونی کانتینر، بین فرزندان فاصله ایجاد می‌کند:

.container {
  display: flex;
  gap: 20px; /* فاصله ۲۰ پیکسلی از هر طرف بین آیتم‌ها */
}

ویژگی‌های آیتم‌ها (Flex Items)

این ویژگی‌ها مستقیماً روی عناصر فرزند اعمال می‌شوند و نحوه تغییر اندازه، اولویت نمایش و تراز فردی هر عنصر را کنترل می‌کنند.

۱. ویژگی order

ترتیب بصری نمایش عناصر را بدون تغییر در کدهای HTML تغییر می‌دهد. مقدار پیش‌فرض آن 0 است و می‌تواند عدد مثبت یا منفی باشد:

.item-important {
  order: -1; /* این عنصر قبل از همه نمایش داده می‌شود */
}

۲. ویژگی flex-grow

میزان رشد عنصر نسبت به بقیه عناصر را در صورت وجود فضای خالی اضافی مشخص می‌کند. مقدار آن عددی بدون واحد است (پیش‌فرض 0):

.item-grow-2 {
  flex-grow: 2; /* دو برابر سایر آیتم‌هایی که flex-grow: 1 دارند رشد می‌کند */
}

۳. ویژگی flex-shrink

میزان جمع‌شدن و انقباض عنصر را در صورت کمبود فضا مشخص می‌کند (مقدار پیش‌فرض 1 است). اگر مقدار آن را 0 قرار دهید، عنصر تحت هیچ شرایطی کوچک‌تر از اندازه تعیین‌شده‌اش نخواهد شد.

۴. ویژگی flex-basis

اندازه اولیه عنصر را قبل از توزیع فضای خالی (اعمال flex-grow یا flex-shrink) تعیین می‌کند. مقادیر آن مانند width پذیرفته می‌شود (مانند 200px یا 25% یا auto).

۵. ویژگی خلاصه flex

ترکیب سه دستور فوق است. فرمت استاندارد به صورت flex: flex-grow flex-shrink flex-basis نوشته می‌شود:

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

۶. ویژگی align-self

اجازه می‌دهد تراز یک آیتم خاص روی محور متقاطع، با استایلی که در align-items والد تنظیم شده تفاوت داشته باشد و مقدار آن را اورراید کند.

جدول خلاصه ویژگی‌های Flexbox

جدول زیر مرجع سریع و جداسازی‌شده‌ای از تمام دستورات Flexbox برای دسترسی آسان است:

سناریوهای کاربردی در دنیای واقعی

۱. مرکزچین کردن کامل یک باکس (Holy Grail Centering)

برای قرار دادن یک عنصر دقیقاً در مرکز افقی و عمودی صفحه، سیستم Flexbox ساده‌ترین روش ممکن را ارائه می‌دهد:

.hero-section {
  display: flex;
  justify-content: center; /* تراز افقی */
  align-items: center;    /* تراز عمودی */
  min-height: 100vh;
}

۲. ساخت منوی بالای سایت (Header Navigation)

چیدمان لوگو در یک سمت و لینک‌ها یا دکمه ورود در سمت دیگر:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

اگر قصد دارید این‌گونه ساختارهای متداول را بدون کدنویسی دستی در وردپرس پیاده کنید، آموزش المنتور می‌تواند روش‌های ویژوال استفاده از Flexbox Containerها را به شما نشان دهد.

۳. کارت‌های یک‌اندازه با دکمه چسبیده به پایین (Equal Height Cards)

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

.card-container {
  display: flex;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  flex: 1; /* همه کارت‌ها عرض مساوی می‌گیرند */
}

.card-button {
  margin-top: auto; /* دکمه را به انتهای کارت هدایت می‌کند */
}

نکات تخصصی و رفتار Flexbox در زبان‌های راست‌به‌چپ (RTL)

نکات زیر تجربیاتی هستند که جلوی بروز باگ‌های عجیب در قالب‌های وب فارسی را می‌گیرند:

• رفتار هوشمند flex-start در وب‌سایت‌های فارسی: کلمه flex-start به معنی «چپ» یا «راست» نیست؛ بلکه به معنی «ابتدای جهت متن» است. اگر سند شما دارای direction: rtl باشد، flex-start سمتی راست خواهد بود. این ویژگی باعث می‌شود قالب‌های شما بدون نیاز به تغییر CSS برای زبان‌های مختلف کاملاً سازگار باشند.
• تفاوت مهم flex-basis: 0 با flex-basis: auto: وقتی flex-grow: 1 می‌دهید، اگر flex-basis روی auto باشد، اندازه محتوای درون عنصر در محاسبات عرض دخالت می‌کند. اما اگر flex-basis: 0 قرار دهید، فلكس‌بكس محتوا را نادیده گرفته و تمام ستون‌ها را دقیقاً با عرض‌های ریاضی یکسان تقسیم می‌کند.
• مشکل سرریز متن و نادیده‌گرفتن min-width: آیتم‌های فلکس به صورت ضمیر خودآگاه دارای min-width: auto هستند. اگر متن بسیار طولانی یا کدی بدون فاصله درون آیتم باشد، ممکن است از کانتینر بیرون بزند. راه حل ساده این است که روی آیتم فلکس مقدار min-width: 0 را تنظیم کنید.

پرسش‌های متداول

عیب‌یابی سریع مشکلات شایع

برای دسترسی به ابزارها و نمونه‌های کدی بیشتر می‌توانید از آرشیو قطعه کدها در وب‌سایت بازدید کنید.