مجتبی خدابخشیآموزش چیدمان CSS با Flexbox و Grid از پایه
تفاوت Flexbox و Grid، طراحی واکنشگرا و تمرین ساخت کارتهای حرفهای.
Flexbox برای جریان یکبعدی
وقتی عناصر در یک جهت قرار میگیرند، مانند منو یا ردیف دکمهها، Flexbox کنترل فاصله، تراز و پیچش را فراهم میکند. محور اصلی با جهت flex تعیین میشود.
Grid برای صفحه و کارتها
Grid ستون و ردیف را همزمان مدیریت میکند. با ستونهای انعطافپذیر و حداقل عرض، تعداد کارتها میتواند خودکار با اندازه صفحه تغییر کند.
- از عرض ثابت دوری کن.
- فاصله را با gap مدیریت کن.
- موبایل را از ابتدا آزمایش کن.
- حرکت را برای کاربر حساس محدود کن.
پروژه این درس
صفحه معرفی HTML درس قبل را به شبکه کارت مهارتها تبدیل کن. سربرگ را با Flexbox و کارتها را با Grid بساز و در نمایشگر کوچک همه را در یک ستون قرار بده.
پرسشهای متداول
Flexbox بهتر است یا Grid؟
هیچکدام مطلقاً بهتر نیست؛ Flexbox برای یک محور و Grid برای دو محور طراحی شده است.
واکنشگرایی یعنی چه؟
چیدمان و اندازهها با فضای در دسترس سازگار میشوند و محتوا در موبایل و دسکتاپ قابل استفاده میماند.
جمعبندی
رابط را بر اساس رابطه عناصر طراحی کن: Flexbox برای ردیف و ستون، Grid برای شبکه. واکنشگرایی را بخشی از طراحی اولیه بدان.
از مفهوم تا استفاده واقعی
در وب، HTML ساختار، CSS ظاهر و JavaScript رفتار صفحه را میسازند. برای یادگیری سریعتر هر سه را روی یک قابلیت کوچک و قابل مشاهده تمرین کن.
یک مثال از دنیای واقعی
برای یک کافه، فرم ثبت سفارش بساز که نام نوشیدنی را بگیرد و آن را همان لحظه به فهرست سفارشها اضافه کند. این مثال ساده ورودی، رویداد و تغییر رابط را یکجا نشان میدهد.
const orders = ['قهوه'];
function addOrder(name) {
if (!name.trim()) return;
orders.push(name);
console.log(`سفارش جدید: ${name}`);
}
addOrder('چای سبز');حالا نوبت توست
تعداد کل سفارشها را بعد از اضافهشدن هر سفارش در خروجی نمایش بده.
- نمونه را یکبار اجرا یا بازنویسی کن.
- تغییر خواستهشده را بدون کپی کامل انجام بده.
- خروجی را با انتظار خودت مقایسه کن.
- در یک جمله توضیح بده چرا راهحل کار کرد.
اول مسئله و خروجی مورد انتظار را روشن کن؛ بعد ابزار را انتخاب کن.
نمونه کوچکِ کامل از پروژه بزرگِ نیمهتمام بیشتر به یادگیری کمک میکند.
کد را فقط نخوان؛ تغییرش بده، خطا بساز و دلیل نتیجه را توضیح بده.
این مسیر را ادامه بده
تمرین این صفحه را انجام بده، نتیجه را برای خودت توضیح بده و بعد سراغ درس مرتبط بعدی برو.
انتخاب مسیر بعدی ←