ژنراتور Flexbox
ایجاد طرح های CSS flexbox با پیش نمایش بصری
tools.flexboxGenerator.title
tools.flexboxGenerator.description
tools.flexboxGenerator.container
tools.flexboxGenerator.preview
tools.flexboxGenerator.cssCode
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 0px;
طرح بندی های Flexbox CSS را به صورت بصری با Flexbox Generator ما ایجاد کنید. با استفاده از CSS Flexbox با پیش نمایش و صادرات کد، طرحبندیهای انعطافپذیر و پاسخگو ایجاد کنید.
Key Features
ویرایشگر ویژگی ویژوال فلکس باکس
پیش نمایش طرح در زمان واقعی
پشتیبانی از تمام ویژگی های انعطاف پذیر (جهت، بسته بندی، توجیه، تراز)
کنترل های فاصله و فاصله
تولید کد CSS و کپی در کلیپ بورد
پیش نمایش پاسخگو برای چند اندازه صفحه نمایش
ژنراتور Flexbox
جهت
جهت انعطاف پذیری (سطری، ستونی یا معکوس) را برای طرح بندی خود انتخاب کنید
تنظیم تراز
پیکربندی justify-content و align-item برای تراز عنصر
افزودن بسته بندی
انعطافپذیری را برای طرحبندیهای چند خطی فعال کنید
تنظیم شکاف
تنظیم فاصله بین موارد انعطاف پذیر
ببینید کپی CSS
کد CSS تولید شده را دریافت کنید و روی HTML خود اعمال کنید
Use Cases
ساخت منوهای ناوبری پاسخگو
ایجاد طرح بندی کارت های انعطاف پذیر
طراحی طرح بندی محتوای متمرکز و توزیع شده
نمونه سازی سیستم های شبکه پاسخگو
Frequently Asked Questions
فلکس باکس چیست؟
Flexbox یک ماژول طرحبندی CSS برای ایجاد طرحبندیهای تک بعدی انعطافپذیر و پاسخگو است.
چه زمانی باید از Flexbox vs Grid استفاده کنم؟
Flexbox برای طرح بندی های 1 بعدی (ردیف ها / ستون ها)؛ شبکه برای چیدمان های دو بعدی (ردیف ها و ستون ها)
چگونه عناصر را با Flexbox در مرکز قرار دهم؟
از justify-content و align-item که هر دو در مرکز تنظیم شده اند برای مرکزیت کامل استفاده کنید
آیا Flexbox در مرورگرهای قدیمی پشتیبانی می شود؟
Flexbox در تمام مرورگرهای مدرن کار می کند. IE 10-11 پشتیبانی جزئی دارد
Tool Information
Related Tools You Might Like
رنگی ژنراتور از تصویر
استخراج رنگ های غالب از یک تصویر
RGB و Hex Converter
تبدیل فرمت های رنگی RGB و HEX
ژنراتور CSS Gradient
ایجاد گرادین های CSS با پیش نمایش
کنترل کنتراست WCAG
کنترل رنگ با توجه به استانداردهای WCAG
ژنراتور امضا دیجیتال
ایجاد امضای دیجیتال با فونت های مختلف
جعبه سایه ژنراتور
ایجاد سایه جعبه CSS
محاسبه حجم Surfboard Calculator
محاسبه حجم کامل surfboard بر اساس وزن، سطح تجربه و شرایط امواج شما.
تبدیل ارتفاع موج
تبدیل بین اندازه گیری های مختلف ارتفاع امواج (ارتفاع صورت، مقیاس هاوایی، تورم اقیانوس).
دانلود Scuba Dive Planner
برنامه ریزی غواصی اسکوبا خود را با محدودیت های عمق، زمان پایین و نیازهای ایمنی انقباض.