فلکس‌باکس واکنش‌گرا

فلکس‌باکس واکنش‌گرا

فلکس‌باکس ابزار قدرتمندی برای طراحی ریسپانسیو است. با تغییر flex-direction و flex-wrap می‌توان چیدمان‌های مختلفی ساخت.

تغییر جهت برای موبایل

/* دسکتاپ — افقی */
    .navbar { display: flex; flex-direction: row; }
    
    /* موبایل — عمودی */
    @media (max-width: 768px) {
        .navbar { flex-direction: column; }
    }

wrap برای ریسپانسیو

.cards {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .card {
        flex: 1 1 300px;  /* حداقل ۳۰۰px، رشد می‌کند */
    }

منوی همبرگری

/* دسکتاپ */
    .menu { display: flex; flex-direction: row; }
    
    /* موبایل */
    @media (max-width: 768px) {
        .menu {
            flex-direction: column;
            position: absolute;
            background: #2c3e50;
            width: 100%;
        }
    }

بهترین شیوه‌ها

• Mobile-First با فلکس‌باکس آسان است
• flex-wrap: wrap برای پاسخگویی
• flex: 1 1 min-size برای آیتم‌های ریسپانسیو
• تغییر flex-direction در موبایل

نكات مهم

• فلکس‌باکس برای ریسپانسیو عالی است
• flex: 1 1 300px حداقل ۳۰۰px و رشد می‌کند
• در موبایل، منوی افقی را عمودی کنید
• order برای تغییر ترتیب در موبایل