آموزش چیدمان CSS با Flexbox و Grid از پایه
تفاوت Flexbox و Grid، طراحی واکنشگرا و تمرین ساخت کارتهای حرفهای.
Flexbox برای جریان یکبعدی
وقتی عناصر در یک جهت قرار میگیرند، مانند منو یا ردیف دکمهها، Flexbox کنترل فاصله، تراز و پیچش را فراهم میکند. محور اصلی با جهت flex تعیین میشود.
Grid برای صفحه و کارتها
Grid ستون و ردیف را همزمان مدیریت میکند. با ستونهای انعطافپذیر و حداقل عرض، تعداد کارتها میتواند خودکار با اندازه صفحه تغییر کند.
- از عرض ثابت دوری کن.
- فاصله را با gap مدیریت کن.
- موبایل را از ابتدا آزمایش کن.
- حرکت را برای کاربر حساس محدود کن.
پروژه این درس
صفحه معرفی HTML درس قبل را به شبکه کارت مهارتها تبدیل کن. سربرگ را با Flexbox و کارتها را با Grid بساز و در نمایشگر کوچک همه را در یک ستون قرار بده.
پرسشهای متداول
Flexbox بهتر است یا Grid؟
هیچکدام مطلقاً بهتر نیست؛ Flexbox برای یک محور و Grid برای دو محور طراحی شده است.
واکنشگرایی یعنی چه؟
چیدمان و اندازهها با فضای در دسترس سازگار میشوند و محتوا در موبایل و دسکتاپ قابل استفاده میماند.
جمعبندی
رابط را بر اساس رابطه عناصر طراحی کن: Flexbox برای ردیف و ستون، Grid برای شبکه. واکنشگرایی را بخشی از طراحی اولیه بدان.