چرا Flexbox؟

Flexbox یک مدل چیدمان یک‌بعدی است: آیتم‌ها در یک ردیف (row) یا یک ستون (column) قرار می‌گیرند. با چند property ساده می‌توانی تراز، توزیع فضا و ترتیب آیتم‌ها را کنترل کنی.

فعال‌سازی Flex

روی المان والد display: flex می‌گذاری. به‌طور پیش‌فرض آیتم‌ها در یک ردیف از چپ به راست (در LTR) چیده می‌شوند.

.container {
    display: flex;
    flex-direction: row;   /* row | column | row-reverse | column-reverse */
    flex-wrap: wrap;      /* در صورت نیاز خط بعد */
}

تراز و توزیع فضا

• justify-content — تراز در جهت اصلی (مثلاً فضای بین آیتم‌ها: space-between، وسط: center)
• align-items — تراز در جهت عمود بر اصلی (مثلاً وسط: center، کشیده: stretch)
• gap — فاصلهٔ بین آیتم‌ها (مثلاً gap: 1rem)

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

کنترل روی هر آیتم

روی خود آیتم‌ها (فرزندها) می‌توانی flex-grow (رشد برای پر کردن فضا)، flex-shrink و flex-basis بگذاری. خلاصهٔ رایج: flex: 1 یعنی «یک سهم از فضای باقی‌مانده بگیر».

.sidebar { flex: 0 0 200px; }
.content { flex: 1; }

با Flexbox می‌توانی منو، کارت‌ها و چیدمان‌های ساده را بدون float و هک به‌راحتی بسازی. برای چیدمان دو بعدی (شبکهٔ سطر و ستون) بعداً CSS Grid را یاد می‌گیری.