Display و Flexbox در Tailwind CSS

بهنام نوبخت · ۱۴۰۵/۷/۱۳

در مقاله‌های قبلی با Utilityهای مختلف Tailwind CSS برای رنگ، Typography، فاصله‌ها، اندازه‌ها، Border، Shadow و سایر ویژگی‌های ظاهری آشنا شدیم. اما برای ساخت یک صفحه وب واقعی، فقط زیبایی عناصر کافی نیست؛ باید بتوانیم عناصر را در کنار یکدیگر قرار دهیم، آن‌ها را مرتب کنیم، وسط‌چین کنیم، فاصله مناسبی بین آن‌ها ایجاد کنیم و نحوه نمایش آن‌ها را کنترل کنیم. Tailwind CSS برای این کار مجموعه‌ای از Utilityهای مربوط به Display و Flexbox در اختیار ما قرار می‌دهد. در این مقاله ابتدا مفهوم display را یاد می‌گیریم و سپس با Flexbox، یکی از مهم‌ترین ابزارهای چیدمان در CSS، به صورت کاملاً عملی کار خواهیم کرد.

Display چیست؟

ویژگی display در CSS مشخص می‌کند که یک عنصر چگونه در صفحه نمایش داده شود و چه نوع فضایی را اشغال کند.

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

در Tailwind CSS برای کنترل این ویژگی از Utility Classهای مختلف استفاده می‌کنیم.

مهم‌ترین Utilityهای Display عبارت‌اند از:

Tailwind Class	کاربرد
`block`	نمایش به صورت Block
`inline`	نمایش به صورت Inline
`inline-block`	ترکیب ویژگی‌های Inline و Block
`flex`	فعال کردن Flexbox
`hidden`	مخفی کردن عنصر
`grid`	فعال کردن CSS Grid

در این مقاله تمرکز اصلی ما روی flex است و grid را در مقاله بعدی به صورت کامل بررسی خواهیم کرد.

تفاوت Block و Inline

برای درک بهتر Flexbox، ابتدا باید تفاوت block و inline را بدانیم.

عنصر Block

یک عنصر Block معمولاً فضای یک خط را در اختیار می‌گیرد.

مثال:

<div class="block bg-blue-500 p-4 text-white">
    Block Element
</div>

<div class="block bg-green-500 p-4 text-white">
    Another Block
</div>

در این حالت دو عنصر در دو خط مختلف قرار می‌گیرند.

عنصر Inline

عناصر Inline معمولاً در همان خط و در کنار سایر عناصر قرار می‌گیرند.

<span class="inline bg-blue-500 text-white">
    First
</span>

<span class="inline bg-green-500 text-white">
    Second
</span>

این دو عنصر می‌توانند در یک خط قرار بگیرند.

Inline-Block

با inline-block می‌توانیم عنصری داشته باشیم که در کنار سایر عناصر قرار بگیرد اما ویژگی‌های بیشتری شبیه عناصر Block داشته باشد.

<span class="inline-block rounded bg-blue-500 px-4 py-2 text-white">
    Button 1
</span>

<span class="inline-block rounded bg-green-500 px-4 py-2 text-white">
    Button 2
</span>

این روش برای بعضی عناصر کوچک مانند Badgeها یا Buttonها کاربرد دارد.

مخفی کردن عناصر با hidden

یکی از Utilityهای بسیار کاربردی Tailwind، کلاس hidden است.

<div class="hidden">
    این محتوا نمایش داده نمی‌شود.
</div>

در CSS معمولی معادل آن تقریباً چنین چیزی است:

display: none;

بنابراین:

<div class="hidden">
    Content
</div>

یعنی عنصر در صفحه نمایش داده نشود.

این Utility در ساخت رابط‌های کاربری و مخصوصاً طراحی Responsive بسیار کاربردی خواهد بود.

Flexbox چیست؟

Flexbox یکی از مهم‌ترین سیستم‌های Layout در CSS است که برای مرتب کردن عناصر در یک Container استفاده می‌شود.

فرض کنید سه کارت داریم:

Card 1
Card 2
Card 3

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

در Tailwind کافی است روی Container از کلاس flex استفاده کنیم:

<div class="flex">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

با اضافه کردن flex، عنصر والد به یک Flex Container تبدیل می‌شود و فرزندان آن به عنوان Flex Item رفتار می‌کنند.

در Flexbox معمولاً عنصر والد را تنظیم می‌کنیم و نحوه قرار گرفتن فرزندان را از طریق Utilityهای آن مشخص می‌کنیم.

ساختار ساده Flexbox

برای درک بهتر، ساختار زیر را در نظر بگیرید:

Flex Container
│
├── Item 1
├── Item 2
└── Item 3

عنصر والد همان Flex Container است و عناصر داخل آن Flex Item هستند.

مثال:

<div class="flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

در این مثال:

<div class="flex">

Container را به Flex Container تبدیل می‌کند.

جهت قرارگیری عناصر با flex-row

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

برای مشخص کردن این موضوع می‌توانیم از:

flex-row

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

مثال:

<div class="flex flex-row">
    <div class="rounded bg-blue-500 p-4 text-white">Item 1</div>
    <div class="rounded bg-green-500 p-4 text-white">Item 2</div>
    <div class="rounded bg-purple-500 p-4 text-white">Item 3</div>
</div>

نتیجه کلی:

Item 1    Item 2    Item

قرار دادن عناصر به صورت ستونی با flex-col

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

flex-col

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

<div class="flex flex-col">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

نتیجه:

Item 1
Item 2
Item 3

این حالت برای ساخت بخش‌هایی مانند فرم‌ها، منوهای عمودی و Layoutهای مختلف بسیار کاربردی است.

justify در Flexbox

یکی از مهم‌ترین Utilityهای Flexbox مربوط به justify است.

justify-* مشخص می‌کند که عناصر در محور اصلی Flexbox چگونه قرار بگیرند.

چند مقدار مهم:

justify-start
justify-center
justify-end
justify-between

justify-start

عناصر از ابتدای محور اصلی قرار می‌گیرند.

<div class="flex justify-start">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

نمایش مفهومی:

[Item 1][Item 2][Item 3]---------------

justify-center

عناصر در مرکز قرار می‌گیرند.

<div class="flex justify-center">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

نمایش مفهومی:

--------[Item 1][Item 2][Item 3]-------

این Utility برای وسط‌چین کردن محتوای یک Container بسیار پرکاربرد است.

justify-end

عناصر به انتهای محور اصلی منتقل می‌شوند.

<div class="flex justify-end">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

نمایش مفهومی:

----------------[Item 1][Item 2]

justify-between

یکی از کاربردی‌ترین Utilityهای Flexbox، justify-between است.

در این حالت فضای خالی بین عناصر تقسیم می‌شود.

<div class="flex justify-between">
    <span>Logo</span>
    <span>Menu</span>
</div>

نتیجه مفهومی:

Logo                              Menu

این روش برای ساخت Header بسیار کاربردی است.

ساخت Header ساده با Flexbox

برای مثال می‌توانیم یک Header ساده ایجاد کنیم:

<header class="flex items-center justify-between bg-gray-900 px-6 py-4 text-white">
    <div class="text-xl font-bold">
        My Website
    </div>

    <nav class="flex gap-6">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

در این مثال چند Utility مهم با هم استفاده شده‌اند:

flex
items-center
justify-between
gap-6

وظیفه آن‌ها به صورت ساده:

flex → فعال کردن Flexbox
items-center → تراز کردن عناصر در محور دیگر
justify-between → قرار دادن عناصر در دو سمت
gap-6 → ایجاد فاصله بین آیتم‌ها

items در Flexbox

Utilityهای items-* برای کنترل نحوه قرارگیری عناصر در محور متقاطع استفاده می‌شوند.

مهم‌ترین موارد:

items-start
items-center
items-end
items-stretch

items-start

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

<div class="flex items-start">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

items-center

عناصر در محور متقاطع وسط‌چین می‌شوند.

<div class="flex items-center">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

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

flex items-cente

برای مثال:

<div class="flex items-center">
    <img src="avatar.jpg" alt="User">
    <span>John Doe</span>
</div>

این ترکیب باعث می‌شود تصویر و متن در یک ردیف قرار بگیرند و از نظر عمودی تراز شوند.

ترکیب justify-center و items-center

اگر بخواهیم یک محتوا را هم افقی و هم عمودی در مرکز قرار دهیم، می‌توانیم از:

flex items-center justify-cente

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

مثال:

<div class="flex min-h-screen items-center justify-center">
    <div class="rounded-xl bg-white p-8 shadow-lg">
        <h2 class="text-2xl font-bold">Welcome</h2>
    </div>
</div>

در اینجا:

items-center

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

justify-center

برای محور اصلی استفاده شده است.

نتیجه این است که کارت در مرکز صفحه قرار می‌گیرد.

gap در Flexbox

برای ایجاد فاصله بین Flex Itemها می‌توانیم از gap-* استفاده کنیم.

مثال:

<div class="flex gap-4">
    <div class="rounded bg-blue-500 p-4 text-white">One</div>
    <div class="rounded bg-green-500 p-4 text-white">Two</div>
    <div class="rounded bg-purple-500 p-4 text-white">Three</div>
</div>

در اینجا:

gap-4

بین آیتم‌ها فاصله ایجاد می‌کند.

مقادیر مختلفی مانند موارد زیر قابل استفاده هستند:

gap-1
gap-2
gap-4
gap-6
gap-8

در Layoutهای Flexbox و Grid، استفاده از gap معمولاً روش ساده و خوانایی برای ایجاد فاصله بین آیتم‌هاست.

Flex Wrap

گاهی تعداد آیتم‌ها بیشتر از فضای موجود است.

برای مثال:

Item 1  Item 2  Item 3  Item 4  Item 5  ...

ممکن است همه آن‌ها در یک خط جا نشوند.

برای اجازه دادن به رفتن آیتم‌ها به خط بعد، از:

flex-wrap

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

<div class="flex flex-wrap gap-4">
    <div class="rounded bg-blue-500 p-6 text-white">Card 1</div>
    <div class="rounded bg-blue-500 p-6 text-white">Card 2</div>
    <div class="rounded bg-blue-500 p-6 text-white">Card 3</div>
    <div class="rounded bg-blue-500 p-6 text-white">Card 4</div>
    <div class="rounded bg-blue-500 p-6 text-white">Card 5</div>
</div>

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

نمایش مفهومی:

Card 1   Card 2   Card 3
Card 4   Card 5

flex-nowrap

در نقطه مقابل flex-wrap، می‌توان از:

flex-nowrap

استفاده کرد.

<div class="flex flex-nowrap">
    ...
</div>

در این حالت آیتم‌ها در یک خط باقی می‌مانند.

flex-1

Utility دیگری که هنگام ساخت Layoutهای Flexbox بسیار کاربردی است:

flex-1

این کلاس اجازه می‌دهد یک Flex Item فضای موجود را تا حد امکان در اختیار بگیرد.

مثال:

<div class="flex gap-4">
    <div class="flex-1 rounded bg-blue-500 p-4 text-white">
        Main Content
    </div>

    <div class="rounded bg-gray-300 p-4">
        Sidebar
    </div>
</div>

در این مثال بخش Main Content فضای باقی‌مانده را بیشتر در اختیار می‌گیرد.

ساخت کارت محصول با Flexbox

حالا یک مثال واقعی‌تر ایجاد کنیم.

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

<div class="flex max-w-xl gap-4 rounded-xl border bg-white p-4 shadow">

    <img
        src="product.jpg"
        alt="Product"
        class="h-32 w-32 rounded-lg object-cover"
    >

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

        <h2 class="text-xl font-bold">
            لپ‌تاپ حرفه‌ای
        </h2>

        <p class="mt-2 text-gray-600">
            یک لپ‌تاپ مناسب برای برنامه‌نویسی و طراحی.
        </p>

        <div class="mt-auto flex items-center justify-between">
            <span class="font-bold">
                ۵۰,۰۰۰,۰۰۰ تومان
            </span>

            <button class="rounded-lg bg-blue-600 px-4 py-2 text-white">
                خرید
            </button>
        </div>

    </div>
</div>

در این مثال:

flex

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

flex-1

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

flex-col

اطلاعات داخل کارت را به صورت عمودی قرار می‌دهد.

justify-between

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

و:

mt-auto

باعث می‌شود بخش قیمت و دکمه به سمت پایین بخش Flex منتقل شود.

ساخت منوی ساده با Flexbox

Flexbox برای ساخت منوها نیز بسیار مناسب است.

<nav class="flex items-center gap-6">
    <a href="#" class="text-gray-700">خانه</a>
    <a href="#" class="text-gray-700">محصولات</a>
    <a href="#" class="text-gray-700">درباره ما</a>
    <a href="#" class="text-gray-700">تماس با ما</a>
</nav>

در اینجا:

flex

آیتم‌ها را در یک ساختار Flex قرار می‌دهد.

items-center

آن‌ها را از نظر عمودی تراز می‌کند.

و:

gap-6

بین لینک‌ها فاصله ایجاد می‌کند.

ساخت دکمه با Icon و Text

یکی دیگر از کاربردهای Flexbox، قرار دادن Icon و متن در کنار یکدیگر است.

<button class="flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-3 text-white">
    <span>+</span>
    <span>افزودن محصول</span>
</button>

در اینجا Icon و متن به راحتی کنار هم قرار می‌گیرند.

تفاوت justify و items را ساده یاد بگیریم

اگر در ابتدای یادگیری Flexbox با justify و items گیج شدید، این قانون ساده را به خاطر بسپارید:

justify-* = کنترل در محور اصلی

items-* = کنترل در محور متقاطع

برای حالت معمول flex-row می‌توانیم این موضوع را به شکل زیر تصور کنیم:

Main Axis
------------------------------------>

[Item 1]   [Item 2]   [Item 3]

Cross Axis
     |
     |
     v

در flex-row:

justify-*

بیشتر روی حرکت افقی عناصر اثر می‌گذارد و:

items-*

بیشتر روی تراز عمودی آن‌ها اثر می‌گذارد.

البته با تغییر جهت Flexbox به flex-col، محور اصلی و متقاطع نیز تغییر می‌کنند.

یک مثال کامل برای تمرین

در این مثال یک بخش ساده شامل عنوان، توضیح و چند کارت ایجاد می‌کنیم:

<section class="mx-auto max-w-5xl p-6">

    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold">
                محصولات جدید
            </h1>

            <p class="mt-2 text-gray-600">
                جدیدترین محصولات فروشگاه را مشاهده کنید.
            </p>
        </div>

        <button class="rounded-lg bg-blue-600 px-5 py-3 text-white">
            مشاهده همه
        </button>
    </div>

    <div class="flex flex-wrap gap-6">

        <div class="flex-1 rounded-xl border p-5 shadow">
            <h2 class="text-xl font-bold">
                Product 1
            </h2>

            <p class="mt-2 text-gray-600">
                Product description.
            </p>
        </div>

        <div class="flex-1 rounded-xl border p-5 shadow">
            <h2 class="text-xl font-bold">
                Product 2
            </h2>

            <p class="mt-2 text-gray-600">
                Product description.
            </p>
        </div>

        <div class="flex-1 rounded-xl border p-5 shadow">
            <h2 class="text-xl font-bold">
                Product 3
            </h2>

            <p class="mt-2 text-gray-600">
                Product description.
            </p>
        </div>

    </div>

</section>

در این مثال چند مفهوم مهم را با هم ترکیب کردیم:

flex
items-center
justify-between
flex-wrap
gap-6
flex-1

این دقیقاً همان نوع ترکیبی است که هنگام ساخت صفحات واقعی با Tailwind CSS زیاد استفاده خواهید کرد.

اشتباهات رایج هنگام استفاده از Flexbox

اشتباه اول: قرار دادن Utility روی عنصر اشتباه

اگر می‌خواهیم فرزندان یک Container کنار هم قرار بگیرند، معمولاً باید flex را روی والد قرار دهیم:

<div class="flex">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

نه اینکه فقط روی یکی از فرزندان قرار دهیم.

اشتباه دوم: استفاده بیش از حد از Margin

گاهی کاربران برای فاصله دادن بین چند عنصر، برای هر عنصر Margin جداگانه تعیین می‌کنند.

مثلاً:

<div class="mr-4">Item 1</div>
<div class="mr-4">Item 2</div>
<div>Item 3</div>

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

<div class="flex gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

این روش خواناتر و قابل مدیریت‌تر است.

اشتباه سوم: اشتباه گرفتن justify و items

اگر هدف شما وسط‌چین کردن یک محتوا در هر دو جهت است، معمولاً باید از ترکیب:

flex items-center justify-center

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

تمرین عملی

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

سپس یک بخش محصولات ایجاد کنید که:

چند کارت داشته باشد
کارت‌ها با Flexbox کنار هم قرار بگیرند
فاصله بین کارت‌ها با gap ایجاد شود
در صورت کمبود فضا، کارت‌ها به خط بعد منتقل شوند
داخل هر کارت از flex-col استفاده شود

جمع‌بندی

در این مقاله با یکی از مهم‌ترین بخش‌های Tailwind CSS یعنی Display و Flexbox آشنا شدیم.

یاد گرفتیم که:

block برای نمایش Block استفاده می‌شود.
inline عناصر را در قالب Inline نمایش می‌دهد.
inline-block ترکیبی از رفتار Inline و Block ایجاد می‌کند.
hidden یک عنصر را مخفی می‌کند.
flex یک Flex Container ایجاد می‌کند.
flex-row عناصر را در جهت ردیفی قرار می‌دهد.
flex-col عناصر را در جهت ستونی قرار می‌دهد.
justify-* نحوه قرارگیری عناصر در محور اصلی را کنترل می‌کند.
items-* نحوه تراز شدن عناصر در محور متقاطع را کنترل می‌کند.
gap-* برای ایجاد فاصله بین آیتم‌ها بسیار کاربردی است.
flex-wrap اجازه می‌دهد آیتم‌ها به خط بعد منتقل شوند.
flex-1 به یک آیتم اجازه می‌دهد فضای موجود را بهتر در اختیار بگیرد.

Flexbox یکی از ابزارهای اصلی برای ساخت Layoutهای مدرن است و با تسلط بر آن، ساخت Header، منو، کارت، دکمه، بخش‌های مختلف صفحه و بسیاری از رابط‌های کاربری بسیار ساده‌تر می‌شود.

۰۰

نظرات

هنوز نظری ثبت نشده است.