ژنراتور فلکس باکس

جهت انعطاف را آزمایش کنید، بپیچید، توجیه کنید و تراز کنید. به‌روزرسانی طرح‌بندی موارد را به‌طور زنده تماشا کنید، سپس CSS ظرف را کپی کنید.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

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

How to use

جهت خم شدن را تنظیم کرده و بسته بندی کنید.
محتوای توجیهی را تنظیم کنید و موارد را تراز کنید.
Flexbox CSS را کپی کنید.

How this tool works

جهت خم شدن را تنظیم کرده و بسته بندی کنید.
محتوای توجیهی را تنظیم کنید و موارد را تراز کنید.
Flexbox CSS را کپی کنید.

Recommended settings

ابتدا از گزینه های پیش فرض استفاده کنید، سپس در صورت نیاز تنظیم کنید

Supported formats

Text / on-page input

File size and limits

پیش‌نمایش‌های چندلایه بسیار پیچیده ممکن است در تلفن‌های قدیمی‌تر کندتر به نظر برسد.

Privacy

ژنراتورهای رنگ و CSS به طور کامل در مرورگر شما اجرا می شوند. پیش نمایش ها و تبدیل ها هرگز سبک های شما را آپلود نمی کنند.

Common use cases

هر زمان که نیاز دارید از Flexbox Generator استفاده کنید: جهت انعطاف‌پذیری را آزمایش کنید، بپیچید، توجیه کنید و تراز کنید - به‌روزرسانی طرح‌بندی‌ها را به‌طور زنده ببینید.

Troubleshooting

پیش نمایش بعد از چسباندن متفاوت به نظر می رسد

CSS رقیب را در صفحه خود بررسی کنید (بازنشانی، رنگ های ارثی). ابتدا قانون تولید شده را در یک stylesheet ایزوله کپی کنید.

FAQ

آیا این CSS من را آپلود می کند؟

خیر. ژنراتورها و مبدل ها در مرورگر شما با پیش نمایش زنده اجرا می شوند.

آیا به یک حساب کاربری نیاز دارم؟

نه. ابزار را باز کنید، کنترل ها را تغییر دهید و CSS را کپی کنید.