آموزش جامع Flexbox

🎯 اهداف یادگیری

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

📌 Flexbox چیست؟

Flexbox یک مدل چیدمان در CSS است که طراحی ساختارهای پیچیده را آسان می‌کند:

css

            .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

            

مزایای Flexbox:

چیدمان آسان: ترازبندی و توزیع عناصر به سادگی انجام می‌شود
واکنش‌گرایی: انطباق خودکار با اندازه‌های مختلف صفحه
کاهش کدنویسی: حذف بسیاری از floatها و clearfixها

📌 مفاهیم اصلی Flexbox

Flexbox از دو عنصر اصلی تشکیل شده است:

css

            /* Flex Container */
.flex-container {
  display: flex;
}
/* Flex Items */
.flex-item {
  flex: 1;
}

            

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

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

📌 ویژگی‌های Flex Container

۱. جهت چیدمان (flex-direction)

css

            .container {
  flex-direction: row; /* پیش‌فرض (افقی) */
  flex-direction: column; /* عمودی */
  flex-direction: row-reverse; /* افقی معکوس */
  flex-direction: column-reverse; /* عمودی معکوس */
}

            

۲. ترازبندی محور اصلی (justify-content)

css

            .container {
  justify-content: flex-start; /* پیش‌فرض (شروع محور) */
  justify-content: flex-end; /* پایان محور */
  justify-content: center; /* وسط محور */
  justify-content: space-between; /* فاصله مساوی بین آیتم‌ها */
  justify-content: space-around; /* فاصله مساوی اطراف آیتم‌ها */
}

            

۳. ترازبندی محور فرعی (align-items)

css

            .container {
  align-items: stretch; /* پیش‌فرض (کشیده شدن) */
  align-items: flex-start; /* شروع محور فرعی */
  align-items: flex-end; /* پایان محور فرعی */
  align-items: center; /* وسط محور فرعی */
  align-items: baseline; /* تراز بر اساس خط پایه متن */
}

            

📌 ویژگی‌های Flex Items

۱. ترتیب نمایش (order)

css

            .item {
  order: 5; /* پیش‌فرض 0 - هرچه عدد بیشتر باشد، ترتیب نمایش بعد خواهد بود */
}

۲. رشد نسبی (flex-grow)

css

            .item {
  flex-grow: 1; /* پیش‌فرض 0 - نسبت فضای اضافی که آیتم باید اشغال کند */
}

۳. جمع‌بندی ویژگی‌ها (flex)

css

            .item {
  flex: 1; /* خلاصه‌نویسی برای flex-grow, flex-shrink و flex-basis */
}

📌 مثال‌های کاربردی

۱. منوی ناوبری

css

            .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

            

۲. کارت محصول

css

            .product-card {
  display: flex;
  flex-direction: column;
}
.card-footer {
  display: flex;
  justify-content: space-between;
}

            

📌 تمرین عملی

با استفاده از Flexbox، منوی زیر را طراحی کنید:

html

            <!-- ساختار HTML -->
<nav class="navbar">
  <div class="logo">لوگو</div>
  <ul class="nav-links">
    <li>صفحه اصلی</li>
    <li>محصولات</li>
    <li>تماس با ما</li>
  </ul>
</nav>

            

راهنمای تمرین:

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

📌 نکات پیشرفته

برای مطالعه کامل فلکس باکس و همچنین آشنایی با مباحث پیشرفته فلکس باکس اینجا کلیک کنید

📌 قدم بعدی

در درس بعدی با برای چیدمان‌های مدرن آشنا خواهیم شد!

❮ خانه بعدی ❯