CSS Flexbox জেনারেটর কী?
ফ্রি অনলাইন CSS Flexbox জেনারেটর। ভিজুয়াল কন্ট্রোলের মাধ্যমে Flexbox বৈশিষ্ট্য সামঞ্জস্য করুন।
CSS Flexbox একটি এক-মাত্রিক লেআউট সিস্টেম যা একটি একক অক্ষ বরাবর স্থান বিতরণ করে — হয় অনুভূমিকভাবে (row) বা উল্লম্বভাবে (column)। এটি রেসপনসিভ লেআউট তৈরি, কন্টেন্ট সেন্টার করা এবং নমনীয় নেভিগেশন বার, কার্ড গ্রিড এবং অ্যালাইনমেন্ট প্যাটার্ন তৈরির আধুনিক মান। CSS ফ্লেক্সবক্স জেনারেটর সব প্রধান ফ্লেক্সবক্স প্রপার্টির জন্য লাইভ প্রিভিউসহ ভিজ্যুয়াল নিয়ন্ত্রণ প্রদান করে, ম্যানুয়াল CSS কোডিংয়ের অনুমান দূর করে।
ভিজ্যুয়াল নিয়ন্ত্রণ আপনাকে flex-direction (row, column, row-reverse, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (flex-start, flex-end, center, baseline, stretch), align-content (র্যাপ করার সময়) এবং gap সেট করতে দেয়। প্রতিটি বোতাম ক্লিক লাইভ প্রিভিউ তৎক্ষণাৎ আপডেট করে।
প্রিভিউ এলাকা একটি কন্টেইনারের ভিতরে রঙিন ফ্লেক্স আইটেম দেখায়। আপনি আইটেম যোগ বা সরাতে পারেন (১ থেকে ১০ পর্যন্ত) এবং তাদের পৃথক প্রস্থ ও উচ্চতা সামঞ্জস্য করতে পারেন। এটি ভিন্ন লেআউট পরীক্ষা করা সহজ করে — উদাহরণস্বরূপ, space-between কীভাবে center অ্যালাইনমেন্টের তুলনায় আইটেম বিতরণ করে তা দেখা।
জেনারেট করা CSS একটি কোড প্যানেলে দেখানো হয় যা প্রতিটি পরিবর্তনে আপডেট হয়। CSS এক-ক্লিকে কপি করুন এবং আপনার প্রজেক্টে পেস্ট করুন। আউটপুট কন্টেইনার প্রপার্টি এবং, আইটেমগুলোর কাস্টম মাত্রা থাকলে, পৃথক আইটেম ফ্লেক্স প্রপার্টি উভয়ই অন্তর্ভুক্ত করে। টুলটি সর্বাধিক ব্যবহৃত ফ্লেক্সবক্স প্রপার্টি কভার করে — প্রতিটি প্রপার্টি মান মুখস্থ না করেই উত্পাদন লেআউটের জন্য আপনার প্রয়োজনীয় সবকিছু।