Flexbox و Grid پیشرفته در Bootstrap

در مقالات قبلی با سیستم Grid و تعدادی از Utilityهای Bootstrap آشنا شدیم و یاد گرفتیم چگونه عناصر را در ستون‌های مختلف قرار دهیم و صفحات Responsive بسازیم. اما در پروژه‌های واقعی معمولاً با Layoutهایی روبه‌رو می‌شویم که فقط با قرار دادن چند col ساده کامل نمی‌شوند. ممکن است بخواهیم یک کارت را دقیقاً در وسط قرار دهیم، چند دکمه را در انتهای یک ردیف نگه داریم، ارتفاع چند کارت را یکسان کنیم، ترتیب عناصر را در موبایل تغییر دهیم، یک Sidebar در کنار محتوای اصلی داشته باشیم یا داخل یک ستون دوباره یک Grid جداگانه ایجاد کنیم. Bootstrap برای انجام این کارها از امکانات قدرتمند Flexbox و CSS Grid استفاده می‌کند. در این مقاله ابتدا مفهوم Flexbox را بررسی می‌کنیم، سپس با کلاس‌های Flex در Bootstrap مانند d-flex، flex-row، flex-column، justify-content-* و align-items-* کار خواهیم کرد. بعد از آن سراغ Grid پیشرفته، Nested Grid، Offset، Order، Alignment، Auto Columns و ترکیب Grid و Flexbox می‌رویم و در نهایت چند Layout واقعی و Responsive ایجاد می‌کنیم.

Flexbox چیست؟

Flexbox یکی از سیستم‌های مهم CSS برای چیدمان عناصر است.

با Flexbox می‌توانیم عناصر را در یک محور اصلی و یک محور متقاطع مدیریت کنیم.

به صورت ساده:

Flex Container
      |
      +----------------------------+
      | Item | Item | Item | Item |
      +----------------------------+

Flexbox برای مواردی مانند موارد زیر بسیار مناسب است:

• قرار دادن عناصر کنار هم

• قرار دادن عناصر زیر هم

• تراز کردن عناصر

• ایجاد فاصله

• قرار دادن عنصر در مرکز

• ایجاد Header

• ساخت Toolbar

• ساخت گروه دکمه‌ها

• تنظیم Layoutهای کوچک

فعال کردن Flexbox در Bootstrap

برای تبدیل یک عنصر به Flex Container می‌توانیم از:

<div class="d-flex">

استفاده کنیم.

مثال:

<div class="d-flex">

    <div>عنصر اول</div>

    <div>عنصر دوم</div>

    <div>عنصر سوم</div>

</div>

به صورت پیش‌فرض عناصر در یک ردیف قرار می‌گیرند.

Flex Row

برای مشخص کردن جهت افقی می‌توانیم از:

<div class="d-flex flex-row">

استفاده کنیم.

ساختار:

Item 1 | Item 2 | Item 3

Flex Column

اگر بخواهیم عناصر زیر یکدیگر قرار بگیرند:

<div class="d-flex flex-column">

نتیجه:

Item 1
Item 2
Item 3

این حالت برای Sidebar و Mobile Layout بسیار کاربردی است.

Flex Row در دسکتاپ و Column در موبایل

یکی از الگوهای بسیار کاربردی:

<div class="d-flex flex-column flex-md-row">

یعنی در موبایل:

Item
Item
Item

و در md به بعد:

Item | Item | Item

این روش در طراحی Responsive بسیار کاربردی است.

Justify Content

یکی از مهم‌ترین Flex Utilityها:

justify-content-start
justify-content-center
justify-content-end
justify-content-between
justify-content-around
justify-content-evenly

است.

شروع

<div class="d-flex justify-content-start">

وسط

<div class="d-flex justify-content-center">

انتها

<div class="d-flex justify-content-end">

فاصله بین عناصر

<div class="d-flex justify-content-between">

در این حالت فضای موجود بین عناصر توزیع می‌شود.

مثال Header

فرض کنید یک Header داریم:

<div class="d-flex justify-content-between align-items-center">

    <div>
        لوگو
    </div>

    <div>
        منو
    </div>

</div>

ساختار:

Logo ---------------- Menu

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

Align Items

justify-content معمولاً برای محور اصلی Flex استفاده می‌شود.

برای محور متقاطع می‌توان از:

align-items-start
align-items-center
align-items-end
align-items-stretch
align-items-baseline

استفاده کرد.

مثلاً:

<div class="d-flex align-items-center">

برای قرار دادن عناصر در راستای عمودی در مرکز بسیار کاربردی است.

ترکیب Justify و Align

یکی از رایج‌ترین الگوها:

<div class="d-flex justify-content-center align-items-center">

این کد عناصر را در هر دو محور در مرکز قرار می‌دهد.

مثال:

<div
    class="d-flex justify-content-center align-items-center"
    style="height: 300px;">

    <div>
        محتوای مرکزی
    </div>

</div>

ساخت Box کاملاً وسط

برای ساخت یک بخش که محتوای آن دقیقاً در مرکز باشد:

<div
    class="d-flex justify-content-center align-items-center"
    style="min-height: 300px;">

    <div class="text-center">

        <h1>
            خوش آمدید
        </h1>

        <p>
            محتوای صفحه
        </p>

    </div>

</div>

این الگو برای Login Page و Empty State بسیار مناسب است.

Flex Wrap

اگر تعداد عناصر زیاد شود، ممکن است بخواهیم آن‌ها به خط بعد بروند.

برای این کار:

<div class="d-flex flex-wrap">

مثال:

<div class="d-flex flex-wrap gap-2">

    <span class="badge text-bg-primary">
        HTML
    </span>

    <span class="badge text-bg-primary">
        CSS
    </span>

    <span class="badge text-bg-primary">
        Bootstrap
    </span>

    <span class="badge text-bg-primary">
        JavaScript
    </span>

</div>

اگر فضای کافی وجود نداشته باشد، عناصر به خط بعد منتقل می‌شوند.

Gap

به جای استفاده از Margin برای ایجاد فاصله بین عناصر Flex، می‌توانیم از:

gap-3

استفاده کنیم.

مثال:

<div class="d-flex gap-3">

    <button class="btn btn-primary">
        ذخیره
    </button>

    <button class="btn btn-secondary">
        انصراف
    </button>

</div>

این روش خوانایی کد را افزایش می‌دهد.

Flex Grow

گاهی می‌خواهیم یک عنصر فضای باقی‌مانده را بگیرد.

Bootstrap کلاس:

flex-grow-1

را در اختیار ما قرار می‌دهد.

مثال:

<div class="d-flex gap-2">

    <input
        type="text"
        class="form-control flex-grow-1"
        placeholder="جستجو">

    <button class="btn btn-primary">
        جستجو
    </button>

</div>

در اینجا Input فضای باقی‌مانده را می‌گیرد.

Flex Shrink

Bootstrap Utility مربوط به Shrink را نیز دارد.

مثال:

<div class="flex-shrink-1">

در Layoutهای پیچیده‌تر می‌توان از آن برای کنترل کوچک شدن عناصر استفاده کرد.

Auto Margin در Flexbox

یکی از تکنیک‌های بسیار مهم:

<div class="d-flex">

    <div>
        سمت اول
    </div>

    <div class="ms-auto">
        سمت دوم
    </div>

</div>

در این حالت ms-auto فضای موجود در سمت Start را مصرف می‌کند.

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

مثال Navbar با Auto Margin

<nav class="navbar">

    <div class="container d-flex">

        <a class="navbar-brand" href="#">
            برند
        </a>

        <div class="ms-auto">

            <button class="btn btn-primary">
                ورود
            </button>

        </div>

    </div>

</nav>

این الگو برای قرار دادن یک بخش در انتهای Layout بسیار مفید است.

Align Self

گاهی نمی‌خواهیم Alignment کل Flex Container را تغییر دهیم و فقط یک عنصر خاص را جابه‌جا کنیم.

Bootstrap کلاس‌هایی مانند:

align-self-start
align-self-center
align-self-end

را دارد.

مثال:

<div class="d-flex align-items-start">

    <div>
        Item 1
    </div>

    <div class="align-self-center">
        Item 2
    </div>

</div>

Flex Order

می‌توان ترتیب عناصر را نیز کنترل کرد.

مثال:

<div class="d-flex">

    <div class="order-2">
        اول در HTML
    </div>

    <div class="order-1">
        دوم در HTML
    </div>

</div>

در نمایش Flex، عنصر دوم از نظر ترتیب بصری قبل از عنصر اول قرار می‌گیرد.

Responsive Order

می‌توان ترتیب را در Breakpointهای مختلف تغییر داد.

مثال:

<div class="order-2 order-md-1">
    محتوا
</div>

در موبایل Order برابر 2 است و از md به بعد Order برابر 1 می‌شود.

این قابلیت برای Layoutهای Responsive بسیار کاربردی است.

Flex و RTL

در صفحه فارسی باید به جهت Flex نیز توجه کنیم.

مثلاً:

<div class="d-flex">

جهت بصری عناصر می‌تواند تحت تأثیر جهت سند قرار گیرد.

به همین دلیل بهتر است در پروژه RTL از کلاس‌های منطقی و ساختار مناسب استفاده کنیم و نتیجه را در مرورگر واقعی بررسی کنیم.

Grid پیشرفته Bootstrap

اکنون سراغ بخش دوم مقاله یعنی Grid پیشرفته می‌رویم.

Bootstrap Grid بر اساس:

Container
    |
    +-- Row
         |
         +-- Columns

کار می‌کند.

در حالت معمول از ۱۲ واحد در هر ردیف استفاده می‌کنیم.

ترکیب ستون‌ها

مثلاً:

<div class="row">

    <div class="col-8">
        8 Units
    </div>

    <div class="col-4">
        4 Units
    </div>

</div>

جمع:

8 + 4 = 12

ترکیب چند ستون

<div class="row">

    <div class="col-3">
        A
    </div>

    <div class="col-6">
        B
    </div>

    <div class="col-3">
        C
    </div>

</div>

جمع:

3 + 6 + 3 = 12

Auto Columns

گاهی نمی‌خواهیم اندازه ستون را دقیقاً مشخص کنیم.

می‌توانیم از:

<div class="col">

استفاده کنیم.

مثال:

<div class="row">

    <div class="col">
        A
    </div>

    <div class="col">
        B
    </div>

    <div class="col">
        C
    </div>

</div>

عرض فضای موجود بین ستون‌ها تقسیم می‌شود.

ترکیب col و col-*

می‌توانیم ترکیبی از ستون‌های Auto و ثابت داشته باشیم.

<div class="row">

    <div class="col">
        Flexible
    </div>

    <div class="col-4">
        Fixed
    </div>

</div>

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

Offset

گاهی نمی‌خواهیم ستون از ابتدای ردیف شروع شود.

می‌توانیم از Offset استفاده کنیم.

مثال:

<div class="row">

    <div class="col-md-6 offset-md-3">
        محتوای مرکزی
    </div>

</div>

در md و بالاتر:

[ Offset ][   Content   ][ Offset ]

این الگو برای فرم‌های Login و Register کاربردی است.

Offset Responsive

می‌توان Offset را در Breakpointهای مختلف تغییر داد.

مثلاً:

<div class="col-12 col-md-8 offset-md-2">

در موبایل:

12 columns

و در md:

2 offset + 8 content + 2 remaining

Row Alignment

Bootstrap امکان تراز کردن ستون‌ها در محور عمودی را نیز فراهم می‌کند.

مثال:

<div class="row align-items-center">

    <div class="col-md-6">
        محتوا
    </div>

    <div class="col-md-6">
        تصویر
    </div>

</div>

این روش برای Hero Section بسیار کاربردی است.

Row Justify Content

می‌توان موقعیت ستون‌ها را نیز کنترل کرد.

مثال:

<div class="row justify-content-center">

    <div class="col-md-6">
        محتوای مرکزی
    </div>

</div>

Nested Grid

یکی از امکانات قدرتمند Bootstrap، قرار دادن Grid داخل یک Column است.

ساختار:

Row
 |
 +-- Column
      |
      +-- Row
           |
           +-- Column
           +-- Column

مثال:

<div class="row">

    <div class="col-md-8">

        <h2>
            محتوای اصلی
        </h2>

        <div class="row g-3">

            <div class="col-md-6">
                کارت اول
            </div>

            <div class="col-md-6">
                کارت دوم
            </div>

        </div>

    </div>

    <div class="col-md-4">
        Sidebar
    </div>

</div>

در اینجا داخل ستون اصلی یک Grid جدید ساخته‌ایم.

ساخت Dashboard با Nested Grid

<div class="container">

    <div class="row g-4">

        <div class="col-lg-8">

            <div class="row g-4">

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            کاربران
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            سفارش‌ها
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            نمودار فروش
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="col-lg-4">

            <div class="card h-100">

                <div class="card-body">
                    فعالیت‌های اخیر
                </div>

            </div>

        </div>

    </div>

</div>

این ساختار برای Dashboardهای واقعی بسیار کاربردی است.

یکسان کردن ارتفاع کارت‌ها

اگر چند Card در یک ردیف داریم، می‌توانیم از:

h-100

استفاده کنیم.

مثال:

<div class="row g-4">

    <div class="col-md-4">

        <div class="card h-100">

            <div class="card-body">
                کارت اول
            </div>

        </div>

    </div>

    <div class="col-md-4">

        <div class="card h-100">

            <div class="card-body">
                کارت دوم
            </div>

        </div>

    </div>

</div>

این روش باعث می‌شود کارت‌ها ارتفاع مناسب یکسانی در ردیف داشته باشند.

ترکیب Grid و Flexbox

یکی از بهترین روش‌ها در Bootstrap این است که Grid و Flexbox را در کنار هم استفاده کنیم.

Grid برای Layout کلی:

<div class="row">

و Flexbox برای Layout داخلی:

<div class="d-flex">

مثال:

<div class="row g-4">

    <div class="col-md-6">

        <div class="card h-100">

            <div class="card-body d-flex flex-column">

                <h2 class="h5">
                    محصول
                </h2>

                <p>
                    توضیحات محصول.
                </p>

                <div class="mt-auto">

                    <strong>
                        750,000 تومان
                    </strong>

                    <button class="btn btn-primary mt-2">
                        خرید
                    </button>

                </div>

            </div>

        </div>

    </div>

</div>

در اینجا:

• Grid، جایگاه Card را مشخص می‌کند.

• Flexbox، محتوای داخل Card را مدیریت می‌کند.

• mt-auto بخش پایینی را به انتهای Card می‌فرستد.

ساخت Product Card حرفه‌ای

<div class="col-12 col-sm-6 col-lg-4">

    <div class="card h-100">

        <img
            src="product.jpg"
            class="card-img-top"
            alt="محصول">

        <div class="card-body d-flex flex-column">

            <h2 class="h5">
                محصول حرفه‌ای
            </h2>

            <p class="text-body-secondary">
                توضیحات محصول در این بخش قرار می‌گیرد.
            </p>

            <div class="mt-auto">

                <div class="fw-bold fs-5 mb-3">
                    1,200,000 تومان
                </div>

                <div class="d-flex gap-2">

                    <button class="btn btn-primary flex-grow-1">
                        خرید
                    </button>

                    <button
                        class="btn btn-outline-danger"
                        aria-label="افزودن به علاقه‌مندی">

                        <i class="bi bi-heart"></i>

                    </button>

                </div>

            </div>

        </div>

    </div>

</div>

این ساختار در فروشگاه‌ها بسیار کاربردی است.

ساخت دو ستون با Sidebar

یک Layout متداول:

<div class="container">

    <div class="row g-4">

        <main class="col-lg-8">
            Main Content
        </main>

        <aside class="col-lg-4">
            Sidebar
        </aside>

    </div>

</div>

در موبایل:

Main Content
Sidebar

و در دسکتاپ:

Main Content | Sidebar

ساخت Sidebar داخلی با Flexbox

<aside>

    <div class="card">

        <div class="card-body d-flex flex-column">

            <h2 class="h5">
                فیلترها
            </h2>

            <div class="mb-3">
                فیلتر اول
            </div>

            <div class="mb-3">
                فیلتر دوم
            </div>

            <button class="btn btn-primary mt-auto">
                اعمال فیلتر
            </button>

        </div>

    </div>

</aside>

ساخت Login Layout

Grid و Flexbox برای صفحه Login نیز بسیار مناسب هستند.

<div class="container">

    <div class="row justify-content-center">

        <div class="col-12 col-sm-10 col-md-6 col-lg-4">

            <div class="card">

                <div class="card-body p-4">

                    <h1 class="h4 text-center mb-4">
                        ورود
                    </h1>

                    <form>

                        <div class="mb-3">

                            <label
                                for="email"
                                class="form-label">

                                ایمیل

                            </label>

                            <input
                                type="email"
                                id="email"
                                class="form-control"
                                dir="ltr">

                        </div>

                        <div class="mb-3">

                            <label
                                for="password"
                                class="form-label">

                                رمز عبور

                            </label>

                            <input
                                type="password"
                                id="password"
                                class="form-control">

                        </div>

                        <button
                            class="btn btn-primary w-100">

                            ورود

                        </button>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

Layout صفحه با Flexbox

گاهی می‌توان کل صفحه را با Flexbox مدیریت کرد.

مثال:

<body class="d-flex flex-column min-vh-100">

    <header>
        Header
    </header>

    <main class="flex-grow-1">
        Main Content
    </main>

    <footer>
        Footer
    </footer>

</body>

در این حالت:

Header
   |
   v
Main
   |
   v
Footer

و flex-grow-1 باعث می‌شود Main فضای باقی‌مانده را بگیرد.

این روش برای ساخت Footer در انتهای صفحه بسیار مفید است.

تفاوت Grid و Flexbox

به صورت ساده:

این جدول به این معنا نیست که یکی همیشه بهتر از دیگری است.

در پروژه واقعی معمولاً از هر دو استفاده می‌کنیم.

چه زمانی از Grid استفاده کنیم؟

Grid Bootstrap برای ساخت Layout کلی مناسب است.

مثلاً:

• Main + Sidebar

• Product Grid

• Dashboard

• Hero Section

• چند ستون Responsive

چه زمانی از Flexbox استفاده کنیم؟

Flexbox برای مدیریت عناصر داخل یک بخش مناسب است.

مثلاً:

• Button Group

• Header Content

• Icon + Text

• Toolbar

• Card Footer

• Centering

• Vertical Layout

اشتباه رایج: استفاده از Margin برای همه چیز

ممکن است چنین کدی ببینیم:

<div class="me-3">
    ...
</div>

<div class="me-3">
    ...
</div>

<div class="me-3">
    ...
</div>

اگر این عناصر Flex هستند، گاهی بهتر است از:

<div class="d-flex gap-3">

استفاده کنیم.

این ساختار ساده‌تر و قابل نگهداری‌تر است.

اشتباه رایج: استفاده بیش از حد از Offset

Offset ابزار قدرتمندی است، اما نباید برای همه Layoutها استفاده شود.

در بسیاری از موارد:

row justify-content-center

می‌تواند خواناتر از ترکیب Offsetهای زیاد باشد.

اشتباه رایج: استفاده بی‌دلیل از Position

برای قرار دادن عناصر در کنار یا مرکز، ابتدا Grid و Flexbox را بررسی کنید.

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

Grid
Flexbox
Gap
Auto Margin

Layout را بسازیم، معمولاً نیازی به Positionهای پیچیده نداریم.

تمرین عملی

یک صفحه فروشگاهی بسازید که شامل:

• Header

• Search Box

• Product Grid

• Sidebar

• Product Cards

• Price

• Buttons

باشد.

Product Grid باید:

Mobile  → 1 column
Tablet  → 2 columns
Desktop → 3 columns

باشد.

داخل Card نیز از Flexbox استفاده کنید تا قیمت و دکمه‌ها در پایین کارت قرار بگیرند.

تمرین دوم

یک صفحه Login ایجاد کنید که:

• در موبایل تقریباً تمام عرض را بگیرد.

• در Tablet عرض متوسط داشته باشد.

• در Desktop عرض محدود داشته باشد.

• فرم در مرکز صفحه قرار گیرد.

• Footer در پایین صفحه قرار بگیرد.

از ترکیب:

Container
Row
Column
Flexbox
min-vh-100
flex-grow-1

استفاده کنید.

تمرین پیشرفته

یک Dashboard Responsive طراحی کنید.

ساختار:

Dashboard
    |
    +-- Header
    |
    +-- Layout
         |
         +-- Sidebar
         |
         +-- Main
              |
              +-- Statistics
              |
              +-- Charts
              |
              +-- Recent Orders
              |
              +-- Activities

در Main از Nested Grid استفاده کنید.

در Cardهای آماری از Flexbox استفاده کنید.

برای موبایل:

Sidebar
    ↓
Offcanvas

Main
    ↓
Full Width

و برای دسکتاپ:

Sidebar | Main

را ایجاد کنید.

جمع‌بندی

در این مقاله با Flexbox و Grid پیشرفته در Bootstrap آشنا شدیم و دیدیم که چگونه می‌توان از این دو ابزار برای ساخت Layoutهای واقعی و Responsive استفاده کرد. در بخش Flexbox با d-flex، flex-row، flex-column، justify-content-*، align-items-*، flex-wrap، gap، flex-grow، flex-shrink، ms-auto و order-* کار کردیم و یاد گرفتیم چگونه عناصر را در محورهای مختلف تراز و مرتب کنیم. سپس به Grid پیشرفته پرداختیم و با Auto Columns، Offset، Responsive Offset، Alignment و Nested Grid آشنا شدیم. همچنین دیدیم که چگونه می‌توان Grid را برای ساخت Layout کلی صفحه و Flexbox را برای مدیریت عناصر داخلی یک بخش به کار برد. ساخت Product Card، Dashboard، Sidebar، Login Page و Layoutهای Responsive نمونه‌هایی از کاربردهای این ترکیب بودند. مهم‌ترین نکته این است که Grid و Flexbox رقیب یکدیگر نیستند؛ در پروژه‌های واقعی معمولاً Grid برای ساختار کلی و Flexbox برای چینش داخلی عناصر استفاده می‌شود.