یاد بگیریم، بسازیم

← بازگشت به صفحه اصلی

چیدمان با Flexbox و Grid

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

چرا به Flexbox و Grid نیاز داریم؟

قبل از این دو تا، چیدمان صفحات وب معمولاً با float یا جدول‌های HTML انجام می‌شد — روش‌هایی که اصلاً برای این کار ساخته نشده بودن و کدشون به‌سرعت پیچیده می‌شد. وسط‌چین کردن عمودی یه عنصر ساده، با float تبدیل می‌شد به یه مشکل بزرگ. Flexbox و Grid دقیقاً برای حل همین مشکل طراحی شدن: چیدمان یک‌بعدی (یه ردیف یا یه ستون) با Flexbox، و چیدمان دوبعدی (هم‌زمان ردیف و ستون) با Grid.

Flexbox چیست؟

Flexbox مخفف Flexible Boxـه. وقتی می‌خوای چند تا عنصر رو تو یه ردیف یا یه ستون بچینی، فاصله‌شون رو کنترل کنی، یا تراز کنی، Flexbox ابزار اصلیته.

فعال‌سازی و محورها

با دادن display: flex به یه عنصر والد، همه‌ی فرزندهای مستقیمش تبدیل به «آیتم‌های flex» می‌شن:

.container {
    display: flex;
}

Flexbox دو تا محور داره: محور اصلی (main axis) که جهت چیدمانه، و محور عرضی (cross axis) که عمود بر اونه. پیش‌فرض محور اصلی افقیه، ولی این قابل تغییره (بخش بعد).

جهت چیدمان: flex-direction

.container {
    display: flex;
    flex-direction: row;    /* پیش‌فرض: افقی */
    /* یا column برای عمودی */
}

وقتی flex-direction رو column می‌ذاری، محور اصلی عمودی می‌شه و همه‌چیز (مثل justify-content تو بخش بعد) بر همون اساس عمل می‌کنه.

تراز کردن: justify-content و align-items

این دو تا ویژگی، قلب Flexboxن:

• justify-content: تراز کردن آیتم‌ها رو محور اصلی (مثلاً افقی، اگه row باشه). مقادیر رایج: flex-start، center، space-between، space-around.
• align-items: تراز کردن آیتم‌ها رو محور عرضی (مثلاً عمودی، اگه row باشه). مقادیر رایج: flex-start، center، stretch.

.container {
    display: flex;
    justify-content: center;  /* وسط‌چین افقی */
    align-items: center;      /* وسط‌چین عمودی */
}

همین دو خط، چیزی که سال‌ها «وسط‌چین کردن عمودی» رو به یه چالش معروف تبدیل کرده بود، حل می‌کنه.

شکستن خط: flex-wrap

پیش‌فرض Flexbox همه‌ی آیتم‌ها رو تو یه خط نگه می‌داره، حتی اگه جا نشن (و فشرده‌شون می‌کنه). با این ویژگی می‌تونی بذاری خودشون به خط بعد برن:

.container {
    display: flex;
    flex-wrap: wrap;
}

کنترل اندازه‌ی آیتم‌ها: flex-grow و flex-shrink

این ویژگی‌ها رو خود آیتم‌ها (نه والد) تنظیم می‌کنی:

• flex-grow: اگه فضای خالی اضافه باشه، این آیتم چقدر نسبت به بقیه رشد کنه (پیش‌فرض ۰، یعنی رشد نکنه).
• flex-shrink: اگه فضا کم باشه، این آیتم چقدر جمع بشه (پیش‌فرض ۱).

.item {
    flex-grow: 1;  /* این آیتم فضای اضافه رو پر کنه */
}

یه الگوی خیلی رایج اینه که به‌جای نوشتن جدا، از shorthand flex استفاده کنی: flex: 1 1 200px; یعنی «رشد کن، جمع شو، و حداقل اندازه‌ت ۲۰۰ پیکسل باشه».

فاصله‌ی یکدست: gap

قبلاً برای فاصله بین آیتم‌های flex مجبور بودی از margin استفاده کنی که حساب‌وکتابش سخت بود. حالا کافیه:

.container {
    display: flex;
    gap: 20px;
}

این دقیقاً همون چیزیه که تو چیدمان ستون‌های همین سایت (مثل فاصله‌ی بین «لینک‌های مفید»، محتوای اصلی، و ستون چپ) استفاده شده.

CSS Grid چیست؟

اگه Flexbox برای چیدمان یک‌بعدیه، Grid برای چیدمان دوبعدیه — وقتی هم‌زمان به ردیف و ستون نیاز داری، مثل یه جدول واقعی ولی خیلی انعطاف‌پذیرتر.

فعال‌سازی و ستون‌ها

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    gap: 20px;
}

این کد یه چیدمان سه‌ستونه می‌سازه، هر ستون ۲۰۰ پیکسل، با ۲۰ پیکسل فاصله بینشون.

واحد fr و repeat()

نوشتن عرض ثابت برای هر ستون، ریسپانسیو نیست. واحد fr (fraction) بهت اجازه می‌ده سهم نسبی هر ستون رو از فضای موجود مشخص کنی:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* سه ستون مساوی */
}

برای این‌که مجبور نباشی 1fr رو چند بار تکرار کنی، از repeat() استفاده می‌کنی:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

یه ترکیب خیلی قدرتمند، repeat(auto-fit, minmax(200px, 1fr))ـه: ستون‌ها خودشون تعداد مناسب رو بسته به عرض صفحه تشخیص می‌دن، هر کدوم حداقل ۲۰۰ پیکسل.

جایگذاری دستی: grid-column و grid-row

می‌تونی مشخص کنی یه آیتم دقیقاً چند تا ستون یا ردیف رو اشغال کنه:

.featured-item {
    grid-column: span 2;  /* دو ستون رو با هم بگیره */
}

Flexbox یا Grid، کدوم رو کی استفاده کنیم؟

• Flexbox: وقتی چیدمانت یک‌بعدیه — یه ردیف از دکمه‌ها، آیتم‌های یه منو، یا ستون‌هایی که باید کنار هم بشینن و بسته به فضا خودشون رو تنظیم کنن (دقیقاً مثل چیدمان main تو همین سایت).
• Grid: وقتی هم‌زمان به کنترل ردیف و ستون نیاز داری — مثلاً یه گالری تصاویر، یا چیدمان کلی یه صفحه با هدر، ساید‌بار، محتوا و فوتر.

این دو تا رقیب هم نیستن؛ خیلی وقت‌ها تو یه پروژه هر دو رو با هم استفاده می‌کنی — مثلاً چیدمان کلی صفحه با Grid، و چیدمان داخل هر کارت با Flexbox.

نمونه‌ی واقعی: چیدمان همین سایت

اگه به style.css همین سایت نگاه کنی، می‌بینی از Flexbox زیاد استفاده شده، نه Grid:

main {
    display: flex;
    flex-direction: row;
    gap: 75px;
    flex-wrap: wrap;
}

این دقیقاً همون الگوییه که چیدمان ستون‌های «لینک‌های مفید»، محتوای اصلی، و ستون چپ رو می‌سازه — با flex-wrap: wrap که تو صفحه‌ی باریک (موبایل)، ستون‌ها به‌جای فشرده شدن، زیر هم می‌رن.

جمع‌بندی

Flexbox برای چیدمان یک‌بعدی و Grid برای چیدمان دوبعدی ساخته شدن. با justify-content، align-items و gap تو Flexbox، و grid-template-columns و واحد fr تو Grid، می‌تونی تقریباً هر چیدمانی که تو ذهنته رو بدون تریک‌های قدیمی بسازی. قدم بعدی طبیعی بعد از CSS، یادگیری جاوااسکریپت‌ه تا به صفحه‌ت رفتار هم اضافه کنی.

← بازگشت به صفحه اصلی