آموزش کامل Flexbox؛ مرجع جامع چیدمان انعطاف‌پذیر در CSS

اگر هنوز برای چیدمان عناصر صفحه از float و table استفاده می‌کنی، وقتشه وارد دنیای مدرن بشی!
Flexbox یکی از قدرتمندترین سیستم‌های چیدمان در CSS است که طراحی رابط کاربری را چندین برابر ساده‌تر می‌کند.

این مقاله یک مرجع کامل و دائمی درباره Flexbox است. بنابراین توصیه می‌کنم حتماً بوکمارکش کن تا همیشه دم دستت باشد!

Flexbox چیست؟

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

اصطلاحات اصلی در Flexbox

اول باید با ساختار پدر و فرزند آشنا شوی:

• Flex Container – والد
• Flex Items – فرزندان

برای فعال شدن Flexbox کافی است داخل المنت پدر بنویسی:

.container {
  display: flex;
}

محورهای Flexbox

• Main Axis – محور اصلی
• Cross Axis – محور عمود بر محور اصلی

این تنظیمات با خصوصیت flex-direction تعیین می‌شوند.

flex-direction: row;        /* پیش‌فرض */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

خصوصیات مربوط به Flex Container

۱. justify-content (چینش افقی روی محور اصلی)

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 (تراز عمودی روی محور عمودی)

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;

۳. flex-wrap (رفتن آیتم‌ها به خط بعدی)

flex-wrap: nowrap; /* پیش‌فرض */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

خصوصیات مربوط به Flex Item

۱. order (مرتب‌سازی)

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

.item {
  order: 2;
}

۲. flex-grow

مشخص می‌کند آیتم چقدر فضا از ناحیه خالی بگیرد.

۳. flex-shrink

مشخص می‌کند آیتم هنگام کمبود فضا چقدر کوچک شود.

۴. flex-basis

اندازه اولیه یک آیتم را مشخص می‌کند.

این سه مورد را می‌توان با خاصیت کوتاه‌نویسی flex استفاده کرد:

.item {
  flex: 1 1 200px;
}

تقلب‌نامه Flexbox (Cheat Sheet)

• مرکز کردن کامل:

  display: flex;
  justify-content: center;
  align-items: center;
  

• چیدمان ستونی:

  flex-direction: column;
  

• فاصله‌گذاری یکنواخت:

  justify-content: space-between;
  

نمونه کاربردی: ساخت هدر واکنش‌گرا

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

یکی از مهم‌ترین مزیت‌های Flexbox این است که در پروژه‌های واقعی می‌توانی با کمترین کد، پیچیده‌ترین چیدمان‌ها را بسازی. از ساخت منوی ناوبری گرفته تا چینش کارت‌ها، فرم‌ها و باکس‌های اطلاعات، Flexbox سرعت توسعه را چند برابر می‌کند و تمام مشکلات قدیمی مثل float، margin trick و height collapse را از بین می‌برد. به همین دلیل یادگیری کامل Flexbox یک مرحله ضروری برای هر توسعه‌دهنده فرانت‌اند است.

جمع‌بندی

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