کانتینر فلکس (Flex Container)

تمام ویژگی‌های کانتینر فلکس: flex-direction، flex-wrap، justify-content، align-items

کانتینر فلکس

عنصری با display: flex تبدیل به کانتینر فلکس می‌شود و فرزندان آن آیتم فلکس می‌شوند.

ویژگی‌های کانتینر

ویژگیتوضیح
flex-directionجهت چیدمان
flex-wrapرفتن به خط بعد وقتی آیتم‌ها در یک خط جا نشدند
justify-contentتراز در محور اصلی
align-itemsتراز در محور متقاطع
align-contentتراز چند خطی
gapفاصله بین آیتم‌ها

flex-direction

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

flex-wrap

.container {
        flex-wrap: nowrap;   /* یک خطی — فشردگی (پیش‌فرض) */
        flex-wrap: wrap;     /* چند خطی ⭐ */
        flex-wrap: wrap-reverse; /* چند خطی معکوس */
    }

shorthand: flex-flow

.container {
        flex-flow: row wrap;  /* direction + wrap */
    }

align-content (چند خطی)

وقتی flex-wrap: wrap فعال باشد و چند خط ایجاد شود:

.container {
        flex-wrap: wrap;
        align-content: space-between;
    }

ترکیب همه ویژگی‌ها

.toolbar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

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

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط