درس ۱۰: Flexbox و Grid

قبل از Flexbox و Grid، طراحی layout در CSS کار پیچیده‌ای بود که نیاز به استفاده از float، position و table داشت. امروزه Flexbox و CSS Grid دو ابزار قدرتمند برای ایجاد layout های انعطاف‌پذیر و واکنش‌گرا هستند.

تفاوت Flexbox و Grid:

• Flexbox: برای layout های یک‌بعدی (ردیف یا ستون)
• Grid: برای layout های دوبعدی (ردیف و ستون همزمان)
• Flexbox: مناسب برای کامپوننت‌ها و عناصر کوچک
• Grid: مناسب برای layout کلی صفحه
• هر دو: کاملاً واکنش‌گرا و انعطاف‌پذیر

Flexbox یا Flexible Box Layout مدلی برای چیدمان عناصر در یک بعد است که کنترل بهتری بر توزیع فضا و تراز عناصر ارائه می‌دهد.

مفاهیم کلیدی:

• Flex Container: عنصر والد که display: flex دارد
• Flex Items: فرزندان مستقیم flex container
• Main Axis: محور اصلی (پیش‌فرض افقی)
• Cross Axis: محور عمودی بر main axis

ایجاد Flex Container:

.container {
  display: flex; /* یا inline-flex */
}

ویژگی‌های اصلی Container:

• flex-direction - جهت چیدمان
• flex-wrap - شکستن خط
• justify-content - تراز در main axis
• align-items - تراز در cross axis
• align-content - تراز خطوط چندگانه

flex-direction:

flex-direction: row;         /* پیش‌فرض - چپ به راست */
flex-direction: row-reverse; /* راست به چپ */
flex-direction: column;      /* بالا به پایین */
flex-direction: column-reverse; /* پایین به بالا */

flex-wrap:

flex-wrap: nowrap;   /* پیش‌فرض - بدون شکستن */
flex-wrap: wrap;     /* شکستن خط */
flex-wrap: wrap-reverse; /* شکستن معکوس */

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: stretch;    /* پیش‌فرض - کشیدن */
align-items: flex-start; /* بالا */
align-items: flex-end;   /* پایین */
align-items: center;     /* وسط */
align-items: baseline;   /* خط پایه */

در ادامه، مثالی از استفاده Flexbox و Grid را مشاهده می‌کنید. کد را ویرایش کرده و تأثیرات مختلف را ببینید:

عناصر درون flex container نیز ویژگی‌های خاص خود را دارند:

flex-grow:

تعیین می‌کند عنصر چقدر رشد کند:

.item1 { flex-grow: 1; } /* رشد معمولی */
.item2 { flex-grow: 2; } /* دو برابر رشد */
.item3 { flex-grow: 0; } /* بدون رشد */

flex-shrink:

تعیین می‌کند عنصر چقدر کوچک شود:

.item { flex-shrink: 1; } /* پیش‌فرض */
.item { flex-shrink: 0; } /* بدون کوچک شدن */

flex-basis:

اندازه اولیه عنصر قبل از توزیع فضا:

.item { flex-basis: 200px; }
.item { flex-basis: 30%; }
.item { flex-basis: auto; }

flex (میانبر):

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

align-self:

تراز فردی برای یک عنصر:

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

CSS Grid Layout سیستمی دوبعدی برای طراحی layout است که امکان کنترل همزمان ردیف‌ها و ستون‌ها را فراهم می‌کند.

مفاهیم کلیدی:

• Grid Container: عنصر والد که display: grid دارد
• Grid Items: فرزندان مستقیم grid container
• Grid Lines: خطوط تقسیم‌کننده
• Grid Tracks: ردیف‌ها و ستون‌ها
• Grid Cells: خانه‌های تشکیل شده
• Grid Areas: مناطق تشکیل شده از چند خانه

ایجاد Grid Container:

.container {
  display: grid; /* یا inline-grid */
}

grid-template-columns:

/* اندازه‌های ثابت */
grid-template-columns: 200px 200px 200px;

/* واحد fr (fraction) */
grid-template-columns: 1fr 2fr 1fr;

/* تکرار */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* ترکیبی */
grid-template-columns: 200px 1fr 100px;

grid-template-rows:

grid-template-rows: 100px 200px 100px;
grid-template-rows: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;

grid-gap (gap):

gap: 20px;           /* همه جهات */
gap: 20px 30px;      /* ردیف ستون */
row-gap: 20px;       /* فاصله ردیف */
column-gap: 30px;    /* فاصله ستون */

grid-template-areas:

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

با استفاده از خطوط:

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

/* میانبر */
.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

/* span استفاده از */
.item {
  grid-column: span 2;
  grid-row: span 1;
}

با استفاده از نام‌ها:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

تراز در Grid:

/* تراز کل grid */
justify-content: center;  /* افقی */
align-content: center;    /* عمودی */

/* تراز عناصر */
justify-items: center;    /* افقی */
align-items: center;      /* عمودی */

/* تراز فردی */
justify-self: center;     /* افقی */
align-self: center;       /* عمودی */

auto-fit و auto-fill:

/* تطبیق خودکار */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

/* پر کردن خودکار */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

minmax():

/* حداقل 200px، حداکثر 1fr */
grid-template-columns: repeat(3, minmax(200px, 1fr));

/* ستون انعطاف‌پذیر */
grid-template-columns: 200px minmax(300px, 1fr) 100px;

Grid با Media Queries:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

بهترین نتایج زمانی حاصل می‌شود که Flexbox و Grid را در کنار هم استفاده کنید:

استراتژی ترکیبی:

• Grid: برای layout کلی صفحه
• Flexbox: برای کامپوننت‌های داخلی
• Grid: برای گالری‌ها و کارت‌ها
• Flexbox: برای نوار ناوبری و فرم‌ها

مثال ترکیبی:

/* Layout کلی با Grid */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  min-height: 100vh;
}

/* نوار ناوبری با Flexbox */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* کارت‌ها با Grid */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* محتوای کارت با Flexbox */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: نوار ناوبری

نوار ناوبری واکنش‌گرا با Flexbox ایجاد کنید که در موبایل به منوی همبرگری تبدیل شود.

تمرین ۲: گالری تصاویر

گالری تصاویری با Grid ایجاد کنید که تعداد ستون‌ها بر اساس اندازه صفحه تغییر کند.

تمرین ۳: Layout صفحه

Layout کاملی برای یک وب‌سایت با header، sidebar، main و footer طراحی کنید.

تمرین ۴: کارت‌های محصول

مجموعه‌ای از کارت‌های محصول که با Grid چیده شده و هر کارت با Flexbox طراحی شده باشد.

بهترین شیوه‌ها:

• از Grid برای layout کلی و Flexbox برای کامپوننت‌ها استفاده کنید
• همیشه mobile-first طراحی کنید
• از minmax() برای انعطاف‌پذیری استفاده کنید
• gap را ترجیح دهید به margin
• از نام‌گذاری معنادار برای grid areas استفاده کنید

نکات عملکرد:

• Grid و Flexbox عملکرد بهتری نسبت به float دارند
• از auto-fit/auto-fill برای بهینه‌سازی استفاده کنید
• تست در مرورگرهای مختلف انجام دهید
• از fallback برای مرورگرهای قدیمی استفاده کنید

اشتباهات رایج:

• استفاده نادرست از flex-grow و flex-shrink
• فراموش کردن gap در Grid
• عدم تست در اندازه‌های مختلف
• پیچیده کردن بیش از حد layout
• عدم استفاده از semantic HTML

تبریک! شما بخش CSS را به پایان رساندید. در ادامه با JavaScript و برنامه‌نویسی تعاملی آشنا خواهید شد.