زمین بازی فلکس‌باکس

درباره زمین بازی فلکس‌باکس

زمین‌بازی Flexbox یک محیط عملی برای آزمایش CSS flexbox است. ویژگی‌های کانتینر — flex-direction، flex-wrap، justify-content، align-items، align-content و gap — را تنظیم کنید و ببینید تا ۱۲ آیتم زنده در پیش‌نمایش با تغییر هر مقدار دوباره چیده می‌شوند. این سریع‌ترین راه برای درک واقعی عملکرد هر ویژگی است.

آیتم‌ها به‌صورت جداگانه قابل ویرایش هستند: روی یکی کلیک کنید تا انتخاب شود و flex-grow، flex-shrink، flex-basis، align-self و order آن را تنظیم کنید. دیدن اینکه یک آیتم رشد می‌کند و فضای آزاد را می‌بلعد در حالی که همسایه‌هایش عرض خود را حفظ می‌کنند، مدل اندازه‌گیری فلکس را سریع‌تر از هر نموداری یاد می‌دهد.

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

نحوه استفاده از زمین بازی فلکس‌باکس

1. flex-direction، wrap، justify-content، align-items، align-content و gap کانتینر را تنظیم کنید.
2. بین ۲ تا ۱۲ آیتم اضافه یا حذف کنید تا کامپوننت واقعی شما را منعکس کند.
3. روی یک آیتم کلیک کنید و grow، shrink، basis، align-self و order آن را تنظیم کنید.
4. پیش‌نمایش زنده را با هر تغییری تماشا کنید.
5. CSS تولیدشده را کپی کرده و در پروژه خود جای‌گذاری کنید.

سوالات متداول