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

Flexbox در CSS

کامپوننت‌های صفحه اسکلت، نوار، منو و گالری را اسکچ کردند. Flexbox راه مدرن چیدن آیتم‌ها در یک جهت است — ردیف یا ستون — با دردسر کمتر float. display: flex را روشن کنید، با flex item آشنا شوید، بعد در درس‌های بعدی Flexbox عمیق‌تر بروید.

جعبهٔ ابزار شروع Flexbox

📊 Flexbox یک‌نگاهه

مفهوم	کار روزمره
کانتینر Flex	پدر با `display: flex` (یا `inline-flex`)
آیتم‌های Flex	فرزندان مستقیم که در چیدمان flex شرکت می‌کنند
محور اصلی	جهت اصلی حرکت آیتم‌ها (پیش‌فرض ردیف)
محور متقاطع	جهت عمود برای تراز
`gap`	فاصلهٔ داخلی بین آیتم‌ها
درس‌های بعد	ویژگی کانتینر، ویژگی آیتم، الگوی واکنش‌گرای flex

قوت Flexbox در یک بُعد است. برای شبکهٔ دوبعدی کامل صفحه، ماژول Grid بعد از این مسیر Flexbox می‌آید.

کانتینر flex را روشن کنید

روی پدر display: flex بگذارید. فرزندان flex item می‌شوند و پیش‌فرض در یک ردیف می‌نشینند.

ردیف پایه flex

css

.toolbar {
display: flex;
align-items: center;
}

.toolbar .btn {
padding: 0.5rem 0.75rem;
}

gap به‌جای جنگ margin

gap بین آیتم‌ها فاصله می‌گذارد بدون ترفند جمع‌شدن. برای gutter یکدست بین فرزندان flex آن را ترجیح دهید.

gap در flex

css

.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}

آیتم‌ها را روی محور اصلی از هم جدا کنید

justify-content فضای آزاد را روی محور اصلی پخش می‌کند. space-between الگوی کلاسیک هدر است: برند چپ، اقدام راست.

هدر space-between

css

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

روی محور متقاطع وسط — و هر دو

align-items: center آیتم‌ها را روی محور متقاطع هم‌تراز می‌کند. با justify جفت کنید تا خوشهٔ آرام وسط جعبه بسازید.

خوشهٔ وسط‌چین flex

css

.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}

وقتی جا کم است wrap کنید

flex-wrap: wrap اجازه می‌دهد آیتم‌ها به خط بعد بیفتند — در گالری هم کمی دیدید. درس Flex Responsive جلوتر می‌رود.

نگاه کوتاه به flex-wrap

css

.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

عادت آرام Flexbox

Flexbox را برای ردیف و ستون یک‌بعدی به کار ببرید: نویگ، تولبار، ردیف کارت، وسط‌چین. بعد جزئیات کانتینر، رشد/جمع‌شدن آیتم، بعد flex واکنش‌گرا. انتظار نداشته باشید Flexbox به‌تنهایی جای هر چیدمان Grid را بگیرد.

نقش‌های نام‌دار flex

css

.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}

.cluster__main { /* بعداً با ویژگی آیتم رشد می‌کند */ }
.cluster__meta { /* جمع‌وجور می‌ماند */ }

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

یک .toolbar با display: flex و سه دکمه بسازید.
gap و align-items: center اضافه کنید.
هدری با justify-content: space-between بسازید.
دو دکمه را با justify + align داخل جعبه وسط کنید.
بنویسید کدام درس بعدی ایده‌های flex-grow / flex-basis را پوشش می‌دهد.

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

پاشیدن display: flex روی هر پوشش بدون هدف چیدمان
انتظار رفتار شبکهٔ دوبعدی کامل مثل Grid از Flexbox
جنگ فاصله با margin تصادفی به‌جای gap
رد کردن درس‌های بعدی و فقط حفظ همین مقدمه
ماندن ابدی روی ردیف float وقتی ردیف flex واضح‌تر است

جمع‌بندی

Flexbox آیتم‌ها را روی یک محور اصلی می‌چیند
display: flex کانتینر می‌سازد؛ فرزندان flex item هستند
gap و justify-content و align-items ردیف روزمره را باز می‌کنند
wrap نگاهی به ردیف واکنش‌گراست؛ بیشتر بعداً می‌آید
درس‌های کانتینر، آیتم و flex واکنش‌گرا مدل را عمیق می‌کنند

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

آماده شروع

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

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

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

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

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

زبان