چیدمان با Flexbox در CSS — راهنمای کامل

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

چرا Flexbox؟

• سادگی در مرکز‌سازی افقی و عمودی.
• توزیع خودکار فضای خالی بین عناصر.
• امکان تغییر ترتیب ظاهری بدون تغییر DOM با order.
• پشتیبانی خوب در مرورگرهای مدرن و مناسب برای رابط‌های تک‌بعدی (row یا column).

اصول پایه و خواص پرکاربرد

• display: flex; یا inline-flex برای فعال‌سازی Flexbox روی کانتینر.
• flex-direction: تعیین جهت محوری (row, row-reverse, column, column-reverse).
• justify-content: تراز افقی/محوری عناصر روی محور اصلی (start, center, space-between, space-around, space-evenly).
• align-items: تراز عمودی/بر محور فرعی (stretch, center, flex-start, flex-end, baseline).
• flex-wrap: اجازه دادن به خط‌شکنی عناصر (nowrap, wrap, wrap-reverse).
• gap: فاصله‌ی یکنواخت بین آیتم‌ها (پشتیبانی در اکثر مرورگرهای مدرن).
• flex (shorthand): ترکیبی از flex-grow, flex-shrink, flex-basis.
• align-self: غیرفعال کردن تراز پیش‌فرض برای آیتم مشخص.
• order: تغییر ترتیب بصری آیتم‌ها بدون تغییر ترتیب در HTML.

مثال 1 — مرکز کردن ساده (آفست‌نشده)

<div class="container">
  <div class="box">محتوا</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  border: 1px solid #ccc;
}

.box {
  padding: 20px;
  background: #f0f0f0;
}

این کد یک کانتینر فلکس می‌سازد که محتوا را هم به‌صورت افقی (justify-content: center) و هم عمودی (align-items: center) وسط‌چین می‌کند. height برای مثال قراردادی است تا نشان دهد تراز عمودی چگونه عمل می‌کند.

مثال 2 — منوی واکنش‌گرا با Wrap و Gap

<nav class="nav">
  <a href="#" class="item">خانه</a>
  <a href="#" class="item">درباره</a>
  <a href="#" class="item">خدمات</a>
  <a href="#" class="item">تماس</a>
</nav>

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
  background: #fff;
}

.item {
  padding: 8px 12px;
  background: #0073e6;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  flex: 0 1 auto; /* اجازه می‌دهد آیتم کوچک‌تر شود ولی رشد نکند */}

در این مثال از flex-wrap: wrap برای شکستن خط وقتی فضا کم می‌شود و از gap برای فاصله‌ی یکنواخت استفاده شده است. مقدار flex: 0 1 auto به آیتم‌ها اجازه می‌دهد کوچک شوند اما به طور پیش‌فرض رشد نکنند، که برای دکمه‌ها یا لینک‌های ناوبری مناسب است.

استفاده از order و align-self

.item-a { order: 2; }
.item-b { order: 1; }
.item-c { align-self: flex-end; }

با order می‌توان ترتیب بصری آیتم‌ها را تغییر داد بدون تغییر HTML. align-self برای override کردن تراز عمودی یک آیتم استفاده می‌شود (مثلاً کشیدن یک آیتم به انتهای محور فرعی).

جدول مرجع سریع خواص مهم

نکات پیشرفته و بهترین شیوه‌ها

• برای طرح‌های دوبعدی (grid-like) بهتر است CSS Grid را استفاده کنید؛ Flexbox برای محور تکی عالی است.
• برای قابلیت دسترسی (a11y) هنگام استفاده از order مراقب ترتیب منطقی محتوا در DOM باشید؛ خواننده‌های صفحه‌خوان به ترتیب DOM توجه می‌کنند.
• استفاده از gap را به جای margin بین آیتم‌ها ترجیح دهید؛ maintenance آسان‌تر و رفتار یکنواخت‌تری دارد.
• برای پشتیبانی مرورگرهای قدیمی (IE11) ممکن است نیاز به fallback یا استفاده از ویژگی‌های کلاسیک باشد؛ اما اکثر مرورگرهای مدرن Flexbox را کامل پشتیبانی می‌کنند.
• برای بهینه‌سازی عملکرد، از ساختار ساده و تعداد لایه‌های عمیقِ nested containers دوری کنید.

بهینه‌سازی مثال: دکمه‌هایی که به اندازه مساوی فضای در دسترس را تقسیم می‌کنند

.toolbar {
  display: flex;
  gap: 10px;
}

.toolbar .btn {
  flex: 1 1 0; /* همه دکمه‌ها فضای مساوی می‌گیرند */  min-width: 80px; /* جلوگیری از خیلی کوچک شدن */}

در این نسخه همه دکمه‌ها با flex: 1 1 0 به طور مساوی عرض کانتینر را تقسیم می‌کنند و با min-width جلوگیری می‌کنیم که در صفحه‌های خیلی کوچک دکمه‌ها بیش از حد فشرده شوند.

موارد استفاده رایج

• صفحه‌آرایی هدر و فوتر: قرار دادن لوگو در یک طرف و منو در طرف دیگر.
• گرید کارت‌های ساده: ردیف‌هایی که می‌توانند در سایزهای کوچک‌تر لار شوند.
• فرم‌ها: قرارگیری label و input در یک خط یا ستون.
• کامپوننت‌های UI مانند تولبار، پنل ابزار و ستون‌بندی ساده.

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

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال