معرفی فلکس‌باکس

آشنایی با فلکس‌باکس، سیستم چیدمان یک‌بعدی مدرن CSS برای ترازبندی و توزیع فضا

فلکس‌باکس چیست؟

Flexbox (Flexible Box) سیستم چیدمان یک‌بعدی CSS است که برای ترازبندی، توزیع فضا و مرتب‌سازی عناصر طراحی شده.

چرا فلکس‌باکس؟

قبل از فلکس‌باکسبا فلکس‌باکس
وسط‌چین عمودی سخت بودalign-items: center
ارتفاع مساوی ستون‌ها سختalign-items: stretch
توزیع فضا سختjustify-content: space-between
ترتیب تغییر سختorder

مدل فلکس

.container {
        display: flex;
        /* فرزندان حالا flex item هستند */
    }

محور اصلی و متقاطع

محورتوضیحویژگی کنترل
محور اصلی (Main Axis)جهت چیدمانjustify-content
محور متقاطع (Cross Axis)عمود بر محور اصلیalign-items

flex-direction

مقدارتوضیح
rowافقی (پیش‌فرض)
row-reverseافقی معکوس
columnعمودی
column-reverseعمودی معکوس

justify-content

مقدارتوضیح
flex-startشروع محور
flex-endانتهای محور
centerمرکز
space-betweenفاصله مساوی، لبه‌ها چسبیده
space-aroundفاصله مساوی، لبه‌ها نصف
space-evenlyفاصله کاملاً مساوی ⭐

align-items

مقدارtوضیح
stretchکشیده شدن (پیش‌فرض)
flex-startشروع محور متقاطع
flex-endانتهای محور متقاطع
centerمرکز
baselineخط پایه

gap

.container {
        display: flex;
        gap: 20px;  /* فاصله بین آیتم‌ها */
    }

flex-wrap 
.container {
        display: flex;
        flex-wrap: wrap;  /* رفتن به خط بعد */
    }

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

نکات مهم

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

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