Midسختی 3 از ۵· در 65٪ مصاحبههای این حوزه پرسیده شده
چه زمانی Flexbox و چه زمانی CSS Grid مناسبتر است؟
☆نشان کردنپاسخ کوتاه
Flexbox برای چیدمان یکبعدی (یک سطر یا یک ستون) مناسب است؛ Grid برای چیدمان دوبعدی (سطر و ستون همزمان) طراحی شده.
پاسخ کامل
هر دو ابزار چیدمان مدرن CSS هستند اما مسئله متفاوتی حل میکنند:
- Flexbox یکبعدی است: یا محتوا را در یک ردیف میچیند یا در یک ستون. برای چیدمان اجزای داخل یک نوار ابزار، یک کارت یا یک منو عالی است.
- CSS Grid دوبعدی است: همزمان سطر و ستون تعریف میکند. برای چیدمان کلی یک صفحه (Sidebar + Header + Content + Footer) مناسبتر است.
قاعده عملی: اگر فقط یک جهت (افقی یا عمودی) اهمیت دارد، Flexbox؛ اگر باید همزمان روی سطر و ستون کنترل داشته باشید، Grid.
مثال کد
/* Flexbox — یک ردیف از دکمهها */
.toolbar { display: flex; gap: 8px; }
/* Grid — چیدمان کلی صفحه */
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
نکته مهم
منبع کامل موضوع: CSS Grid Layout — MDN و Flexbox — MDN.
اشتباه رایج
❌ ساختن کل چیدمان صفحه فقط با Flexbox تودرتو — قابل انجام است، اما Grid برای همین سناریو سادهتر و خواناتر است.