درس هفتم: فلکس‌باکس (Flexbox) – جادوی چیدمان مدرن

فلکس‌باکس یک سیستم چیدمان یک‌بعدی است که به ما اجازه می‌دهد عناصر را در ردیف‌ها یا ستون‌ها سازماندهی کنیم. برای شروع، کافی است به والد (Container) عناصر، ویژگی display: flex; را بدهیم.

🛠️ ۱. ویژگی‌های ظرف اصلی (Flex Container)

بعد از فعال کردن فلکس، از این دستورات برای کنترل فرزندان استفاده می‌کنیم:

↔️ justify-content: تراز کردن افقی (مانند وسط‌چین یا پخش کردن فاصله).
↕️ align-items: تراز کردن عمودی عناصر در یک ردیف.
🔄 flex-direction: تعیین جهت (ردیفی row یا ستونی column).

💻 نمونه کد ساخت یک منوی افقی

ببینید چطور با چند خط، آیتم‌ها با فاصله مساوی در کنار هم قرار می‌گیرند:

.container {
    display: flex;
    justify-content: space-between; /* فاصله یکسان بین آیتم‌ها */
    align-items: center;            /* وسط‌چین عمودی */
    background-color: #f1f2f6;
    padding: 10px;
}

💡 مقادیر مهم justify-content

center: همه آیتم‌ها به وسط می‌چسبند.
space-around: دور تا دور هر آیتم فاصله ایجاد می‌شود.
flex-start: همه به ابتدای ردیف می‌روند.

🚩 تمرین فلکس‌باکس:

یک ظرف (div) با سه فرزند بسازید. با استفاده از display: flex و justify-content: center، هر سه فرزند را دقیقاً به مرکز صفحه هدایت کنید.

درس قبلی

بازگشت به دوره

درس بعدی