یادم می‌آید در روزهایی که چیدمان کنار هم دو عنصر در CSS یک پروژه واقعی بود، باید با float، clearfix، ارتفاع مصنوعی و چند خط ترفند سرهم می‌کردم تا سه کارت کنار هم بنشینند. ساعت‌ها وقت می‌رفت و بعد از هر تغییر کوچک، چیدمان از هم می‌پاشید. لحظه‌ای که اولین بار Flexbox را در یک پروژه دیدم، متوجه شدم که همه‌ی این‌ها یک راه‌حل بسیار ساده‌تر داشتند. اگر امروز از من بپرسند «اگر فقط یک قابلیت CSS می‌توانستی نگه داری، کدام را انتخاب می‌کردی؟»، بدون تردید می‌گویم فلکس باکس. این مقاله، همان مسیری است که در ده‌ها پروژه طی کردم تا فلکس باکس را از یک جادو به یک ابزار قابل‌پیش‌بینی تبدیل کنم.

Flexbox (فلکس باکس) یک مدل چیدمان یک‌بعدی است که در سال ۲۰۰۹ معرفی شد و از سال ۲۰۱۶ به‌طور جدی وارد پروژه‌های واقعی شد. اگر در مسیر آموزش CSS از صفر هستید، این نوشته مرحله‌ی بعدی و ضروری است؛ چون امروز حتی ۹۰٪ چیدمان کامپوننت‌های ساده با همین یک مدل حل می‌شود.

چرا Flexbox این‌قدر مهم شد؟

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

Flexbox اولین مدلی بود که از ابتدا برای «چیدمان» طراحی شد. سه مسئله‌ی بنیادی را حل کرد:

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

در پروژه‌های واقعی، این سه ویژگی بیشترین سود را در چه جاهایی داشتند؟ هدر سایت‌ها، کارت‌های محصول، فرم‌های چندستونه، تولبارها، فوتر چندستونه، و هرجایی که «چند عنصر باید در یک راستا قرار بگیرند». به‌جرات می‌گویم اگر فقط Flexbox را درست بلد باشید، می‌توانید ۹۰٪ نیازهای چیدمان یک سایت معمولی را بدون Grid پاسخ بدهید. برای درک مسیر تکامل چیدمان، CSS مدرن از Flexbox تا Grid را کنار این مقاله بخوانید.

Flexbox هیچ‌وقت به شما نمی‌گوید «چطور»؛ فقط می‌گوید «چطور توزیع شود». همین جدایی، انعطاف بی‌نظیرش را می‌سازد.

مدل ذهنی درست: دو محور و یک محور

قبل از نوشتن اولین خط، این سه مفهوم را باید درونی کنید:

۱. محور اصلی (main axis)

جهت اصلی که آیتم‌ها در آن چیده می‌شوند. این جهت با flex-direction تعیین می‌شود و می‌تواند افقی (row) یا عمودی (column) باشد.

۲. محور متقاطع (cross axis)

محوری عمود بر main axis. اگر main افقی باشد، cross عمودی است و برعکس.

۳. محور تصور ذهنی

بزرگ‌ترین اشتباه تازه‌کارها این است که این دو محور را با «افقی» و «عمودی» یکی می‌گیرند. وقتی flex-direction: column می‌گذارید، همه چیز آینه می‌شود: justify-content دیگر افقی کار نمی‌کند. اگر این را درونی نکنید، در پروژه‌ای که بین row و column جابه‌جا می‌شود، سردرگم خواهید شد.

اولین خط Flexbox: فعال‌سازی

فعال‌سازی Flexbox با یک خط شروع می‌شود:

.container {
  display: flex;
}

همین یک خط، همه‌ی فرزندان مستقیم این عنصر را به آیتم‌های فلکس تبدیل می‌کند. سه تغییر مهم رخ می‌دهد:

  • فرزندان به‌طور پیش‌فرض در یک ردیف قرار می‌گیرند (بدون شکستن خط).
  • عرض هر فرزند بر اساس محتوایش تعیین می‌شود و می‌تواند رشد یا جمع شود.
  • کل container به یک بستر ترازبندی تبدیل می‌شود.

یک نکته‌ی ظریف: Flexbox روی فرزندان مستقیم اثر می‌گذارد، نه نوه‌ها. اگر نوه‌ها نیاز به چیدمان فلکس دارند، باید روی والد خودشان display: flex بگذارید. این موضوع، خیلی از سردرگمی‌های تازه‌کارها را حل می‌کند.

main axis و justify-content

برای توزیع فضای خالی در main axis، از justify-content استفاده می‌کنیم. هفت مقدار اصلی دارد و دانستن تفاوت‌شان بیشترین وقت را در پروژه‌های من ذخیره کرده:

مقداررفتارکاربرد واقعی
flex-startهمه در ابتدای main axisحالت پیش‌فرض
flex-endهمه در انتهای main axisآیکون‌ها در راست هدر
centerوسط‌چیندکمه‌های وسط صفحه
space-betweenاول و آخر چسبیده، بقیه با فاصله یکسانهدر با لوگو و منو
space-aroundهر آیتم فضای مساوی دور خودشکارت‌های محصول
space-evenlyفضای یکسان بین همه‌ی آیتم‌ها و لبه‌هامنوهای ساده
 
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

همین چهار خط، الگویی است که در اکثر هدرهای سایت‌ها به‌کار می‌برم. اگر استانداردهای HTML و CSS را رعایت کرده باشید، ساختار معنایی هدر بدون کلاس اضافه، کاملاً با این تنظیم هماهنگ می‌شود.

cross axis و align-items

در محور متقاطع، ابزار اصلی align-items است:

  • stretch — پیش‌فرض؛ آیتم‌ها کل ارتفاع container را پر می‌کنند.
  • flex-start — بالای container.
  • center — وسط عمودی.
  • baseline — بر اساس خط پایه‌ی متن؛ این مورد را در فرم‌ها زیاد استفاده می‌کنم.
  • flex-end — پایین container.

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

.modal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

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

flex-wrap؛ شکستن در عرض کم

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

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

با flex-wrap: wrap، وقتی جا نبود، آیتم‌ها به خط بعد می‌روند. ترکیب آن با gap (که در ابتدا مخصوص Grid بود اما امروز در Flexbox هم پشتیبانی می‌شود) بسیار تمیزتر از افزودن margin به آیتم‌هاست.

در پروژه‌ای که کارت‌های محصول داشتیم، ترکیب flex-wrap با flex-basis توانست تمام ریسپانسیو کارت‌ها را بدون یک خط media query حل کند. اگر می‌خواهید این تکنیک را در قالب‌های وردپرسی ببینید، ریسپانسیو کردن سایت و طراحی موبایل اول را مطالعه کنید.

flex-grow، flex-shrink و flex-basis

قلب انعطاف‌پذیری Flexbox در سه خاصیت آیتم نهفته است:

  • flex-grow — چقدر فضای اضافی بخواهد بگیرد (پیش‌فرض صفر).
  • flex-shrink — چقدر در فشار کمبود جا، جمع شود (پیش‌فرض یک).
  • flex-basis — اندازه‌ی اولیه قبل از رشد و جمع‌شدن.

به‌جای نوشتن سه خاصیت، معمولاً از کوتاه‌نوشت flex استفاده می‌کنم:

.sidebar { flex: 0 0 250px; }  /* ثابت */
.main    { flex: 1 1 auto; }   /* پرکننده */
.badge   { flex: 0 0 auto; }   /* اندازه محتوا */

این سه الگو، عملاً در همه‌ی پروژه‌های چیدمان ظاهر می‌شوند. اگر منظورتان از هر بخش را دقیقاً بدانید، نیازی به حدس‌زدن‌های تجربی ندارید. جزئیات عددی و تعامل آن‌ها را می‌توانید در گرید در CSS هم به‌صورت مقایسه‌ای ببینید، چون Grid معادل‌های نزدیکی برای همین مفاهیم دارد.

انعطاف‌پذیری واقعی Flexbox از flex-basis می‌آید؛ بدون آن، flex-grow و flex-shrink فقط روی محتوای رندوم کار می‌کنند.

order؛ ترتیب نمایش بدون تغییر HTML

order به شما اجازه می‌دهد ترتیب نمایش آیتم‌ها را تغییر دهید بدون دست‌زدن به HTML:

.priority { order: -1; }

کاربرد واقعی: در موبایل، می‌خواهید یک بخش (مثل دکمه‌ی خرید) بالای محتوای توضیحات بیاید اما در دسکتاپ پایین آن باشد. با order این کار در چند خط media query حل می‌شود.

اما یک هشدار مهم: order فقط ترتیب بصری را تغییر می‌دهد. ترتیب DOM دست‌نخورده می‌ماند و ترتیب ناوبری کیبورد هم بر اساس DOM است. اگر این تفاوت مهم است، به استانداردهای دسترس‌پذیری وب مراجعه کنید.

Flexbox یا Grid؟ تصمیم‌نامه‌ی عملی

این سؤال تقریباً هر ماه در پروژه‌های تیم‌های فنی تکرار می‌شود. جدول زیر تجربه‌ی من را در یک نگاه خلاصه می‌کند:

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

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

اشتباهاتی که در پروژه‌ها دیدم

  • استفاده از flex روی container به‌جای آیتم: خاصیت‌های flex-grow، flex-shrink و flex-basis برای خود آیتم‌ها هستند، نه برای container.
  • نادیده گرفتن min-width: 0 روی آیتم‌های flex: این یکی از دردناک‌ترین تله‌هاست. وقتی محتوای متنی طولانی در یک آیتم flex قرار می‌گیرد، اندازه‌ی محتوا می‌تواند از عرض container بیرون بزند، چون min-width پیش‌فرض یک آیتم flex همان اندازه‌ی محتواست. راه‌حل: min-width: 0 روی آیتمی که می‌خواهید جمع شود.
  • استفاده از margin برای فاصله: امروز gap استاندارد است و مقدار مساوی و بدون دردسر می‌دهد. جایگزینی margin با gap در پروژه‌های قدیمی، اکثر باگ‌های بصری را حل می‌کند.
  • فراموش کردن flex-wrap در موبایل: بدون آن، آیتم‌ها از صفحه بیرون می‌زنند و اسکرول افقی می‌سازند.
  • ترازبندی عمودی روی container بدون ارتفاع: اگر container ارتفاع محدود نداشته باشد، align-items: center معنایی ندارد چون اصلاً فضای عمودی وجود ندارد که وسط‌چین شود.

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

لایه‌ای زیر سینتکس Flexbox

اگر می‌خواهید به لایه‌ی مهندسی موتور رندر نفوذ کنید، چهار مفهوم را بشناسید:

  1. Layout Engine و دو مرحله‌ی اندازه‌گیری: مرورگر ابتدا عرض در دسترس را به آیتم‌ها پیشنهاد می‌دهد (measure)، سپس بر اساس flex-grow و flex-shrink مقدار نهایی را تعیین می‌کند (resolve). به همین دلیل، محتوای طولانی در یک آیتم flex می‌تواند اندازه‌گیری را چندین بار تکرار کند و کارایی را کاهش دهد — به‌ویژه در لیست‌های بلند با متن‌های دینامیک.
  2. min-content و flex-basis: مقدار پیش‌فرض flex-basis یعنی auto، به اندازه‌ی محتوا برمی‌گردد. این تصمیم ظاهراً بی‌خطر، در پروژه‌های بزرگ می‌تواند باعث layout trashing (اجرای مکرر اندازه‌گیری) شود. راه‌حل: برای کارت‌های محصول یا لیست‌ها، صریحاً flex-basis را به یک عدد پیکسلی یا درصدی محدود کنید.
  3. Paint و Composite در انیمیشن: اگر روی آیتم‌های flex انیمیشن اجرا می‌کنید، از transform و opacity استفاده کنید نه margin و width؛ چون مرورگر می‌تواند این دو را در لایه‌ی composite اجرا کند و از layout/paint اضافه اجتناب کند.
  4. Interaction با فریم‌ورک‌ها: در React و Vue، اگر از inline style یا CSS-in-JS برای مقدارهای flex استفاده می‌کنید، هر رندر می‌تواند باعث recalculate style شود. اگر روی پروژه‌های بزرگ کار می‌کنید، بهینه سازی جاوااسکریپت را در کنار این نکته بخوانید؛ چون در نهایت، هزینه‌ی رندر در CSS و JS مشترک است.

یک تجربه‌ی عملی از پروژه‌ای که روی دیتاگرید بزرگ کار می‌کردیم: تبدیل از float به Flexbox در ابتدا کارایی را بهبود داد، اما در ردیف‌های با متن‌های بسیار طولانی، layout trashing ظاهر شد. راه‌حل نهایی، صریح کردن flex-basis و min-width: 0 روی آیتم‌های متنی بود؛ با این تغییر کوچک، پروفایلر Chrome تفاوت قابل توجهی در زمان layout نشان داد. برای مطالعه‌ی موازی این لایه با CSS مدرن و Grid، آموزش CSS از صفر را از ابتدا مرور کنید، چون بدون مدل ذهنی درست، این سطح از تحلیل ممکن نیست.

Flexbox ابزاری برای چیدمان است، نه ابزاری برای انیمیشن؛ هر جا این دو را قاطی کنید، مرورگر بهایش را از سرعت می‌گیرد.

خط پایان این مسیر

Flexbox را می‌توان در یک جمله خلاصه کرد: «ابزار چیدمان یک‌بعدی با محورهای واضح و انعطاف‌پذیری دقیق.» سه درس که در پایان این مسیر می‌خواهم روی آن‌ها تأکید کنم:

  1. محورها را قبل از خاصیت‌ها بفهمید. هر بار که flex-direction را عوض می‌کنید، ذهن شما باید خودکار main و cross را جابه‌جا کند. اگر این خودکار شود، هیچ‌وقت در ترازبندی گیر نخواهید کرد.
  2. از gap استفاده کنید، نه margin. این یک تصمیم ساده اما با اثر بلندمدت روی نگهداری است.
  3. Flexbox و Grid را به‌عنوان دو ابزار مکمل ببینید، نه رقیب. در پروژه‌های خودم، ساختار کلی با Grid و اجزای داخلی با Flexbox ترکیب می‌شوند؛ این ترکیب، هم خواناتر و هم مقیاس‌پذیرتر است.

اگر در پروژه‌ای با یک مشکل عجیب Flexbox روبرو شده‌اید — مثلاً آیتمی که جمع نمی‌شود یا ترازبندی‌ای که در موبایل به هم می‌ریزد — جزئیات سناریو را در دیدگاه بنویسید. مخصوصاً اگر با ترفندی مثل min-width: 0 موفق به حل یک باگ سرسخت شده‌اید، همان تجربه برای خواننده‌ی بعدی از هر توضیح کلی ارزشمندتر است. 🧩