در حال بارگذاری...

کانتینر Flex در CSS

مقدمهٔ Flexbox پدر را به کانتینر تبدیل کرد. این درس روی کانتینر می‌ماند: محور اصلی را انتخاب کنید، فضا را پخش کنید، روی محور متقاطع تراز کنید، و خط‌ها را wrap کنید. رشد آیتم (flex-grow، flex-basis) برای درس Flex Items می‌ماند.

جعبهٔ ابزار کانتینر flex

📊 کانتینر flex یک‌نگاهه

ویژگی	کار روزمره
`flex-direction`	محور اصلی را می‌گذارد: `row`، `column` یا حالت reverse
`justify-content`	آیتم‌ها را روی محور اصلی پخش می‌کند
`align-items`	آیتم‌ها را روی محور متقاطع تراز می‌کند (یک خط)
`flex-wrap`	اجازه می‌دهد آیتم‌ها به خط‌های جدید بپیچند
`align-content`	چند خط flex را روی محور متقاطع بسته‌بندی می‌کند
`gap`	بین آیتم‌ها (و خط‌ها) فاصله می‌گذارد بدون جنگ margin

یادتان باشد: justify روی محور اصلی سوار است؛ align روی محور متقاطع. اگر flex-direction را به column عوض کنید، این نقش‌ها با محورها می‌چرخند.

flex-direction — محور اصلی را انتخاب کنید

پیش‌فرض row است. برای پشتهٔ عمودی مثل سایدبار یا گروه فرم از column استفاده کنید. حالت reverse ترتیب دیداری را برمی‌گرداند — ترتیب خواندن را چک کنید منطقی بماند.

کانتینر flex ستونی

css

.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

justify-content — پخش روی محور اصلی

فضای آزاد را روی محور اصلی تقسیم کنید: flex-start، center، flex-end، space-between، space-around، space-evenly. هدرها اغلب space-between می‌خواهند.

حالت‌های justify

css

.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}

align-items — تراز محور متقاطع

روی یک خط، align-items جای عمودی در ردیف را کنترل می‌کند (یا جای افقی در ستون). پیش‌فرض stretch است؛ center چسب روزمرهٔ UI است.

align-items وسط

css

.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}

wrap و align-content

با flex-wrap: wrap آیتم‌های اضافه خط تازه می‌سازند. align-content وقتی فضای آزاد روی محور متقاطع هست آن خط‌ها را بسته‌بندی می‌کند — اگر wrap برابر nowrap باشد تقریباً کاری نمی‌کند.

بسته‌بندی خط‌های wrap

css

.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}

عادت آرام کانتینر

اول direction، بعد justify، بعد align-items، بعد در صورت نیاز wrap. برای gutter از gap استفاده کنید. رشد تک‌آیتم را برای درس بعد بگذارید — شبکهٔ دوبعدی صفحه را هم به CSS Grid بعدی بسپارید.

نقش‌های نام‌دار کانتینر

css

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

خودتان امتحان کنید

یک .stack با flex-direction: column و سه بلوک بسازید.
روی یک نوار پهن justify-content: space-between را با center مقایسه کنید.
min-height را بالا ببرید و align-items: stretch را با center امتحان کنید.
چیپ‌ها را wrap کنید و نگاهی به align-content: flex-start بیندازید.
یک جمله بنویسید: کدام ویژگی‌ها مال آیتم‌اند نه کانتینر؟

اشتباه‌های رایج

قاطی کردن ذهنی justify و align بعد از عوض کردن direction
استفاده از row-reverse بدون چک ترتیب خواندن/صفحه‌کلید
انتظار اثر از align-content وقتی nowrap است
گذاشتن flex-grow روی کانتینر به‌جای آیتم
خواستن چیدمان کامل Grid دوبعدی از ویژگی‌های کانتینر flex

جمع‌بندی

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

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان