با ویژگیهای flexbox روی پیشنمایش زنده آزمایش کنید و CSS تولیدشده را کپی کنید.
درباره این ابزار
زمین بازی CSS Flexbox یک ویرایشگر تعاملی برای ویژگیهای اصلی چیدمان یک ظرف flex است. مقادیر flex-direction، justify-content، align-items و flex-wrap را از چهار فهرست کشویی انتخاب کنید تا یک پیشنمایش از پنج جعبهٔ شمارهدار فوراً بازچینی شود، پس میتوانید پیش از نوشتن هر کدی ببینید هر ویژگی چگونه چیدمان را شکل میدهد.
زیر پیشنمایش، قاعدهٔ متناظر .container همزمان با کار شما تولید میشود: display: flex بهدنبال چهار اعلانی که انتخاب کردید. یک دکمه کل بلوک را به کلیپبورد شما کپی میکند تا آمادهٔ جایگذاری در یک شیوهنامه باشد. فقط این ویژگیهای سطح ظرف در دسترساند؛ تنظیمات هر آیتم مانند flex-grow، order یا align-self پوشش داده نمیشوند.
همهچیز در مرورگر شما اجرا میشود. چیزی بارگذاری نمیشود، حساب یا ردیابی در کار نیست و آفلاین کار میکند. این راهی سریع برای ساختن شهود flexbox یا تولید یک قاعدهٔ آغازین است که سپس دستی پالایشش کنید.
پرسشهای پرتکرار
پیشنمایش چه چیزی نشان میدهد؟
یک ظرف flex که پنج جعبهٔ شمارهدار را در بر دارد و همزمان با تغییر flex-direction، justify-content، align-items یا flex-wrap بهصورت زنده بازچینی میشود.
آیا CSS تولیدشده آمادهٔ استفاده است؟
بله. قاعدهٔ تولیدشدهٔ .container را مستقیم در شیوهنامهٔ خود کپی کنید؛ آن شامل display: flex بهعلاوهٔ چهار ویژگیای است که انتخاب کردید.
کدام ویژگیهای flexbox را میتوانم تنظیم کنم؟
چهار فهرست کشویی، flex-direction (row، row-reverse، column، column-reverse)، justify-content (flex-start، flex-end، center، space-between، space-around، space-evenly)، align-items (stretch، flex-start، flex-end، center، baseline) و flex-wrap (nowrap، wrap، wrap-reverse) را کنترل میکنند.
آیا خروجی شامل gap یا تنظیمات flex هر آیتم است؟
خیر. قاعدهٔ کپیشده فقط display: flex و چهار ویژگی ظرف را دارد. فاصلهٔ 8px در پیشنمایش فقط برای فاصلهگذاری است و ویژگیهای سطح آیتم مانند flex-grow، order یا align-self گنجانده نمیشوند.