سی‌اس‌اس/flexbox

float

flexbox

grid

مقدمه

فلکس‌باکس (به انگلیسی: Flexible Box Layout یا Flexbox) یک ماژول چیدمان در CSS3 است که برای طراحی رابط‌های کاربری انعطاف‌پذیر و واکنش‌گرا (Responsive) به کار می‌رود. این سیستم به توسعه‌دهندگان وب امکان می‌دهد تا عناصر یک صفحه را به‌صورت دینامیک و با کنترل بالا در کنار یکدیگر یا در جهت‌های مختلف قرار دهند، بدون نیاز به استفاده از تکنیک‌های پیچیده مانند شناورسازی (Float) یا موقعیت‌دهی مطلق (Absolute Positioning).

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

تاریخچه

فلکس‌باکس به‌عنوان بخشی از استاندارد CSS3 توسط کنسرسیوم جهانی وب (W3C) توسعه یافت. نسخه اولیه این ماژول در سال ۲۰۰۹ منتشر شد و پس از چندین بازبینی، در سال ۲۰۱۷ به یک استاندارد پایدار تبدیل شد. امروزه، فلکس‌باکس توسط تمام مرورگرهای مدرن مانند کروم، فایرفاکس، سافاری و اج پشتیبانی می‌شود.

مفاهیم پایه

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

کانتینر فلکس (Flex Container): عنصری که ویژگی display: flex یا display: inline-flex به آن اعمال می‌شود و به‌عنوان والد (Parent) عمل می‌کند.
آیتم‌های فلکس (Flex Items): عناصر فرزند مستقیم کانتینر فلکس که تحت تأثیر ویژگی‌های فلکس‌باکس قرار می‌گیرند.

محورها در فلکس‌باکس

فلکس‌باکس دو محور اصلی دارد:

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

ویژگی‌های اصلی فلکس‌باکس

ویژگی‌های فلکس‌باکس به دو دسته تقسیم می‌شوند: ویژگی‌هایی که روی کانتینر فلکس اعمال می‌شوند و ویژگی‌هایی که روی آیتم‌های فلکس اعمال می‌شوند.

ویژگی‌های کانتینر فلکس

display: flex | inline-flex:

فعال‌سازی مدل فلکس‌باکس. flex یک بلوک کامل ایجاد می‌کند، در حالی که inline-flex یک عنصر درون‌خطی ایجاد می‌کند.

  .container {
    display: flex;
  }

flex-direction:

جهت محور اصلی را تعیین می‌کند. مقادیر ممکن: row (پیش‌فرض، افقی از چپ به راست)، {{کد|row-reverse، column، column-reverse.

  .container {
    flex-direction: row;
  }

flex-wrap:

مشخص می‌کند که آیا آیتم‌ها در یک خط باقی بمانند یا به خط بعدی منتقل شوند. مقادیر ممکن: nowrap (پیش‌فرض)، wrap، wrap-reverse.

  .container {
    flex-wrap: wrap;
  }

justify-content:

توزیع آیتم‌ها در امتداد محور اصلی را کنترل می‌کند. مقادیر ممکن: flex-start، flex-end، center، spacebetween، space-around، space-evenly.

  .container {
    justify-content: space-between;
  }

align-items:

تراز آیتم‌ها در امتداد محور فرعی را تعیین می‌کند. مقادیر ممکن: flex-start، flex-end، center، baseline، stretch.

  .container {
    align-items: center;
  }

align-content:

تراز خطوط چندگانه آیتم‌ها در صورت استفاده از flex-wrap: wrap را کنترل می‌کند. مقادیر مشابه justify-content.

ویژگی‌های آیتم‌های فلکس

flex-grow:

مشخص می‌کند که یک آیتم تا چه حد می‌تواند نسبت به سایر آیتم‌ها رشد (در صورت فضای اضافی) کند.

  .item {
    flex-grow: 1;
  }

flex-shrink:

مشخص می‌کند که یک آیتم تا چه حد می‌تواند کوچک شود.

  .item {
    flex-shrink: 1;
  }

flex-basis:

اندازه اولیه آیتم را قبل از توزیع فضای اضافی تعیین می‌کند.

  .item {
    flex-basis: 200px;
  }

flex:

یک ویژگی ترکیبی برای flex-grow، flex-shrink و flex-basis.

  .item {
    flex: 1 1 200px;
  }

align-self:

تراز یک آیتم خاص را در محور فرعی بازنویسی می‌کند.

  .item {
    align-self: flex-end;
  }

order:

ترتیب نمایش آیتم‌ها را تغییر می‌دهد.

  .item {
    order: 2;
  }

نکات مهم

پشتیبانی مرورگرها: فلکس‌باکس در تمام مرورگرهای مدرن پشتیبانی می‌شود، اما برای مرورگرهای قدیمی ممکن است نیاز به پیشوندهای فروشنده (Vendor Prefixes) مانند webkit باشد.
انعطاف‌پذیری در طراحی واکنش‌گرا: فلکس‌باکس برای طراحی‌های پاسخ‌گو بسیار مناسب است، زیرا به‌راحتی می‌توان چیدمان‌ها را برای اندازه‌های مختلف صفحه تنظیم کرد.
ترکیب با سایر ماژول‌ها: فلکس‌باکس می‌تواند با CSS Grid ترکیب شود تا چیدمان‌های پیچیده‌تر ایجاد شود.
محدودیت‌ها: فلکس‌باکس برای چیدمان‌های تک‌بعدی مناسب است. برای چیدمان‌های دوبعدی، CSS Grid گزینه بهتری است.

مثال عملی

در این مثال، یک چیدمان ساده با سه آیتم فلکس ایجاد می‌کنیم:

<div class="container">
  <div class="item">آیتم 1</div>
  <div class="item">آیتم 2</div>
  <div class="item">آیتم 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

نتیجه

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

تمرین

۱. یک کانتینر فلکس ایجاد کنید که آیتم‌ها را به‌صورت عمودی (ستونی) چیده و فاصله بین آن‌ها به‌طور مساوی توزیع شود.

۲. یک آیتم فلکس را طوری تنظیم کنید که عرض آن دو برابر سایر آیتم‌ها باشد.

۳. با استفاده از order، ترتیب نمایش آیتم‌ها را تغییر دهید.

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

/* پاسخ به تمرین 1 */
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 400px;
}

/* پاسخ به تمرین 2 */
.item:nth-child(2) {
  flex-grow: 2;
}

/* پاسخ به تمرین 3 */
.item:nth-child(1) {
  order: 3;
}

/* پاسخ به تمرین 4 */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}
@media (min-width: 601px) {
  .container {
    flex-direction: row;
  }
}

منابع

پیوند به بیرون

طراحی واکنش‌گرا - مفاهیم طراحی برای نمایش در دستگاه‌های مختلف