آموزش Flexbox در 20 دقیقه به زبان ساده

مقدمه

در دنیای طراحی وب، استفاده از CSS برای چیدمان عناصر صفحه از اهمیت ویژه‌ای برخوردار است. یکی از ابزارهای قدرتمند و مدرن در CSS برای چیدمان، Flexbox است. Flexbox یا “Flexible Box Layout” به شما این امکان را می‌دهد که به راحتی و به طور انعطاف‌پذیر، عناصر را در یک صفحه وب بچینید. در این مقاله، ما به آموزش کامل Flexbox در 20 دقیقه به زبان ساده خواهیم پرداخت.

Flexbox چیست؟

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

شروع با Flexbox

برای استفاده از Flexbox، ابتدا باید یک عنصر والد (Container) ایجاد کنید و سپس عناصر فرزند (Items) را درون آن قرار دهید. برای شروع، بیایید یک مثال ساده از Flexbox را بررسی کنیم.

1. ایجاد یک Container

برای ایجاد یک Flexbox، ابتدا باید به عنصر والد خود خاصیت display: flex; را اضافه کنید. به عنوان مثال:

.container {
    display: flex;
}

2. اضافه کردن عناصر فرزند

حالا که یک Container داریم، می‌توانیم عناصر فرزند را به آن اضافه کنیم. به عنوان مثال:

<div class="container">
    <div class="item">آیتم 1</div>
    <div class="item">آیتم 2</div>
    <div class="item">آیتم 3</div>
</div>

3. تنظیمات اولیه Flexbox

حالا که عناصر فرزند را داریم، می‌توانیم تنظیمات اولیه Flexbox را انجام دهیم. این تنظیمات شامل موارد زیر است:

• flex-direction: تعیین می‌کند که عناصر فرزند به صورت افقی یا عمودی چیده شوند.
• justify-content: نحوه توزیع فضای خالی بین عناصر فرزند را مشخص می‌کند.
• align-items: نحوه تراز کردن عناصر فرزند در محور عمودی را تعیین می‌کند.

مثال: تنظیمات اولیه

.container {
    display: flex;
    flex-direction: row; /* یا column */
    justify-content: space-between; /* یا center, flex-start, flex-end */
    align-items: center; /* یا flex-start, flex-end, baseline */
}

توضیح تنظیمات Flexbox

1. flex-direction

خاصیت flex-direction تعیین می‌کند که عناصر فرزند به چه صورتی چیده شوند. مقادیر ممکن برای این خاصیت عبارتند از:

• row: عناصر به صورت افقی (از چپ به راست) چیده می‌شوند.
• row-reverse: عناصر به صورت افقی (از راست به چپ) چیده می‌شوند.
• column: عناصر به صورت عمودی (از بالا به پایین) چیده می‌شوند.
• column-reverse: عناصر به صورت عمودی (از پایین به بالا) چیده می‌شوند.

2. justify-content

خاصیت justify-content نحوه توزیع فضای خالی بین عناصر فرزند را مشخص می‌کند. مقادیر ممکن شامل:

• flex-start: عناصر در ابتدای Container چیده می‌شوند.
• flex-end: عناصر در انتهای Container چیده می‌شوند.
• center: عناصر در مرکز Container چیده می‌شوند.
• space-between: فضای خالی به طور مساوی بین عناصر توزیع می‌شود.
• space-around: فضای خالی به طور مساوی در اطراف عناصر توزیع می‌شود.

3. align-items

خاصیت align-items نحوه تراز کردن عناصر فرزند در محور عمودی را تعیین می‌کند. مقادیر ممکن شامل:

• flex-start: عناصر در بالای Container تراز می‌شوند.
• flex-end: عناصر در پایین Container تراز می‌شوند.
• center: عناصر در مرکز محور عمودی تراز می‌شوند.
• baseline: عناصر بر اساس خط پایه متن تراز می‌شوند.
• stretch: عناصر به اندازه Container کشیده می‌شوند.

نکات کلیدی:

• اگر جهت فلکس‌باکس را به flex-direction: column تغییر دهید:
  • justify-content روی عمودی اثر می‌کند.
  • align-items روی افقی اثر می‌کند.
• space-between vs space-around:
  • space-between: فاصله فقط بین آیتم‌ها.
  • space-around: فاصله دو طرف هر آیتم (نصف فاصله در لبه‌ها).

مثال‌های عملی

مثال 1: چیدمان افقی

<div class="container">
    <div class="item">آیتم 1</div>
    <div class="item">آیتم 2</div>
    <div class="item">آیتم 3</div>
</div>

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

مثال 2: چیدمان عمودی

<div class="container">
    <div class="item">آیتم 1</div>
    <div class="item">آیتم 2</div>
    <div class="item">آیتم 3</div>
</div>

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

استفاده از خاصیت flex

علاوه بر تنظیمات Container، می‌توانیم برای هر عنصر فرزند نیز خاصیت flex را تنظیم کنیم. این خاصیت به ما این امکان را می‌دهد که اندازه عناصر فرزند را به صورت انعطاف‌پذیر تنظیم کنیم.

خاصیت flex

خاصیت flex می‌تواند شامل سه مقدار باشد:

• flex-grow: مقدار فضایی که عنصر می‌تواند در صورت وجود فضای خالی بگیرد.
• flex-shrink: مقدار فضایی که عنصر می‌تواند در صورت کمبود فضا کاهش یابد.
• flex-basis: اندازه اولیه عنصر قبل از اعمال grow و shrink.

مثال: استفاده از خاصیت flex

.item {
    flex: 1; /* یا flex: 2 1 100px; */
}

نکات مهم در استفاده از Flexbox

1. تنظیمات پیش‌فرض: Flexbox به طور پیش‌فرض عناصر را در یک خط (row) چیدمان می‌کند. بنابراین اگر می‌خواهید عناصر را به صورت عمودی بچینید، حتماً از flex-direction: column; استفاده کنید.
2. توجه به اندازه‌ها: اگر اندازه‌های عناصر فرزند را به درستی تنظیم نکنید، ممکن است چیدمان شما به درستی نمایش داده نشود.
3. پشتیبانی مرورگرها: Flexbox در اکثر مرورگرهای مدرن پشتیبانی می‌شود، اما بهتر است از نسخه‌های جدید مرورگرها استفاده کنید.

نتیجه‌گیری

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

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