ফ্লেক্সবক্স জেনারেটর

ফ্লেক্স দিক দিয়ে পরীক্ষা করুন, মোড়ানো, ন্যায্যতা এবং সারিবদ্ধ করুন। আইটেম লেআউট আপডেট লাইভ দেখুন, তারপর কন্টেইনার 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

ফ্লেক্স দিকনির্দেশ, মোড়ানো, ন্যায্যতা এবং সারিবদ্ধ নিয়ে পরীক্ষা করুন — লেআউট আপডেট লাইভ দেখুন।
আপনার ব্রাউজারে চলে
ব্যবহার করার জন্য বিনামূল্যে

কীভাবে ব্যবহার করবেন

ফ্লেক্স-দিক এবং মোড়ানো সেট করুন।
ন্যায্যতা-সামগ্রী এবং সারিবদ্ধ-আইটেম সামঞ্জস্য করুন।
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

আপনার যখনই প্রয়োজন ফ্লেক্সবক্স জেনারেটর ব্যবহার করুন: ফ্লেক্স দিকনির্দেশ নিয়ে পরীক্ষা করুন, মোড়ানো, ন্যায্যতা এবং সারিবদ্ধ করুন — লেআউট আপডেট লাইভ দেখুন।

Troubleshooting

প্রিভিউ পেস্ট করার পরে ভিন্ন দেখায়

আপনার পৃষ্ঠায় প্রতিযোগী CSS পরীক্ষা করুন (রিসেট, উত্তরাধিকারসূত্রে পাওয়া রং)। উত্পন্ন নিয়মটি প্রথমে একটি বিচ্ছিন্ন স্টাইলশীটে অনুলিপি করুন।

প্রশ্নোত্তর

এটি কি আমার সিএসএস আপলোড করে?

না। জেনারেটর এবং রূপান্তরকারী লাইভ প্রিভিউ সহ আপনার ব্রাউজারে চলে।

আমি একটি অ্যাকাউন্ট প্রয়োজন?

না। টুল খুলুন, নিয়ন্ত্রণ পরিবর্তন করুন এবং CSS কপি করুন।