استودیوی تعاملی بصری Flexbox و Grid در CSS

درک ویژگی‌های Flexbox و Grid با دیدن آن‌ها آسان‌تر از خواندن مستندات است. این محیط آزمایشی کنترل کاملی بر هر دو فراهم می‌کند: بین موتور Flexbox (direction، wrap، justify-content، align-items، align-content، gap) و موتور CSS Grid (ستون‌ها و ردیف‌های قالب، justify-items، align-items، gap) جابه‌جا شوید و هر تغییر را بلافاصله روی بوم زنده‌ای از آیتم‌های رنگی ببینید.

آیتم‌های فرزند را اضافه یا حذف کنید تا ببینید چیدمان با عناصر بیشتر یا کمتر چگونه رفتار می‌کند، و با استفاده از شبیه‌ساز نقاط شکست، پیش‌نمایش چیدمان را در عرض‌های دسکتاپ، تبلت و موبایل ببینید.

دریافت CSS

وقتی چیدمان درست به نظر رسید، CSS تولیدشده و آمادهٔ استفاده در محیط تولید را مستقیماً در شیوه‌نامهٔ خود کپی کنید—نیازی نیست قوانین کانتینر را از ابتدا دستی بنویسید.