📏 درس چهارم: چیدمان با Flexbox

🎯 هدف این درس: آشنایی با Flexbox و نحوه چیدمان پیشرفته عناصر

سلام دوست عزیز! 👋

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

توی این درس، با هم یاد می‌گیریم:

✅ مفهوم Flexbox و مزایای آن
✅ direction و justify-content
✅ align-items و flex-wrap
✅ مرتب‌سازی آیتم‌ها
✅ تمرین: طراحی یک هدر حرفه‌ای

📐 بخش ۱: Flexbox چیست؟

Flexbox یک روش چیدمان پیشرفته است که به ما امکان می‌دهد عناصر را به‌صورت منعطف و واکنش‌گرا در کنار هم بچینیم.

💡 مزایای Flexbox:

✅ چیدمان آسان عناصر در یک ردیف یا ستون
✅ تراز کردن عمودی و افقی
✅ واکنش‌گرایی خودکار
✅ مرتب‌سازی و تغییر ترتیب عناصر

ساختار کلی Flexbox:

🎨
Flexbox

CSS
v3


<style>
    .container {
        display: flex;  /* تبدیل به فلکس */
    }

    .item {
        /* آیتم‌های داخل فلکس */
    }
</style>

<div class="container">
    <div class="item">آیتم ۱</div>
    <div class="item">آیتم ۲</div>
    <div class="item">آیتم ۳</div>
</div>

📊 بخش ۲: ویژگی‌های اصلی Flexbox

📊 ویژگی‌های Flexbox

ویژگی	کاربرد	مقادیر
`flex-direction`	جهت چیدمان	row, column, row-reverse, column-reverse
`justify-content`	تراز افقی	flex-start, center, flex-end, space-between, space-around
`align-items`	تراز عمودی	flex-start, center, flex-end, stretch
`flex-wrap`	شکستن خط	nowrap, wrap, wrap-reverse
`gap`	فاصله بین آیتم‌ها	مقدار به پیکسل

مثال: جهت و تراز

🎨
Flexbox مثال

CSS
v3


<style>
    .container {
        display: flex;
        flex-direction: row;  /* افقی */
        justify-content: center;  /* وسط‌چین افقی */
        align-items: center;  /* وسط‌چین عمودی */
        gap: 20px;  /* فاصله بین آیتم‌ها */
        height: 200px;
        background: #f0f4f8;
    }

    .item {
        background: #2563EB;
        color: white;
        padding: 20px;
        border-radius: 8px;
    }
</style>

🔀 بخش ۳: justify-content (تراز افقی)

🎨
justify-content

CSS
v3


<style>
    .flex-start {
        justify-content: flex-start;  /* چپ (شروع) */
    }

    .center {
        justify-content: center;  /* وسط */
    }

    .flex-end {
        justify-content: flex-end;  /* راست (پایان) */
    }

    .space-between {
        justify-content: space-between;  /* فاصله مساوی بین آیتم‌ها */
    }

    .space-around {
        justify-content: space-around;  /* فاصله مساوی دور آیتم‌ها */
    }
</style>

📏 بخش ۴: align-items (تراز عمودی)

🎨
align-items

CSS
v3


<style>
    .align-start {
        align-items: flex-start;  /* بالا */
    }

    .align-center {
        align-items: center;  /* وسط */
    }

    .align-end {
        align-items: flex-end;  /* پایین */
    }

    .align-stretch {
        align-items: stretch;  /* کشیده شدن */
    }
</style>

💡 تفاوت justify-content و align-items

justify-content برای تراز کردن در جهت اصلی (افقی) و align-items برای تراز کردن در جهت عمودی استفاده می‌شود.

📝 بخش ۵: پروژه عملی – طراحی یک هدر حرفه‌ای

📝 پروژه: هدر حرفه‌ای

یک هدر حرفه‌ای با استفاده از Flexbox طراحی کنید که شامل لوگو، منو و دکمه باشد.

🔍 راه‌حل پروژه:

🎨
هدر حرفه‌ای

CSS
v3


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>هدر حرفه‌ای</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Vazir", "Arial", sans-serif;
        }

        header {
            background: white;
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border-bottom: 1px solid #e2e8f0;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2563EB;
        }

        nav {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        nav a {
            color: #475569;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #2563EB;
        }

        .btn-login {
            background: #2563EB;
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn-login:hover {
            background: #1D4ED8;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">🚀 رجستری</div>
        <nav>
            <a href="#">دوره‌ها</a>
            <a href="#">وبلاگ</a>
            <a href="#">درباره ما</a>
            <a href="#">تماس</a>
            <button class="btn-login">ورود / ثبت‌نام</button>
        </nav>
    </header>
</body>
</html>

📝 تمرین‌های عملی

🎯 تمرین شماره ۱

یک نوار ناوبری با Flexbox طراحی کنید که شامل لوگو در چپ و لینک‌ها در راست باشد.

🎯 تمرین شماره ۲

سه کارت را با استفاده از Flexbox در یک ردیف با فاصله مساوی قرار دهید.

🧩 جمع‌بندی درس

تبریک می‌گم! 🎉 توی این درس یاد گرفتی:

✅ مفهوم Flexbox و مزایای آن
✅ ویژگی‌های اصلی Flexbox (flex-direction, justify-content, align-items)
✅ تفاوت justify-content و align-items
✅ استفاده از flex-wrap برای شکستن خط
✅ طراحی یک هدر حرفه‌ای با Flexbox

🎯 برای درس بعدی آماده‌اید؟

در درس بعدی، با Grid آشنا می‌شیم و یاد می‌گیریم چطور چیدمان‌های پیچیده‌تر رو طراحی کنیم.

🔗 لینک‌های مرتبط

⬅️
درس قبل: مدل جعبه

🚀
درس بعدی: Grid

🏠
صفحه دوره‌ها

👤

نویسنده یونس رجستری

📅

تاریخ انتشار 20 مرداد 1405

🔄

آخرین بروزرسانی 20 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

چیدمان با Flexbox