Flexbox প্লেগ্রাউন্ড
লাইভ আইটেমে CSS Flexbox প্রপার্টি নিয়ে পরীক্ষা করুন এবং জেনারেট করা লেআউট CSS কপি করুন।
—
সবকিছু আপনার ব্রাউজারেই চলে — কিছুই আপলোড হয় না।
Flexbox প্লেগ্রাউন্ড সম্পর্কে
Flexbox Playground হলো CSS flexbox শেখার একটি হাতে-কলমে স্যান্ডবক্স। কন্টেইনার প্রপার্টি সেট করুন — flex-direction, flex-wrap, justify-content, align-items, align-content এবং gap — এবং প্রতিটি মান বদলানোর সাথে সাথে প্রিভিউতে ১২টি পর্যন্ত লাইভ আইটেম পুনর্বিন্যস্ত হতে দেখুন। প্রতিটি প্রপার্টি আসলে কী করে তা বোঝার এটাই সবচেয়ে দ্রুততম উপায়।
আইটেমগুলো আলাদাভাবে সম্পাদনযোগ্য: একটি বেছে নিতে ক্লিক করুন এবং এর flex-grow, flex-shrink, flex-basis, align-self ও order ঠিক করুন। একটি আইটেমকে খালি জায়গা দখল করতে বাড়তে দেখা, অথচ তার পাশের আইটেমগুলো নিজেদের প্রস্থ ধরে রাখা — এটি যেকোনো ডায়াগ্রামের চেয়ে দ্রুত flex সাইজিং মডেল শেখায়।
প্লেগ্রাউন্ডটি কন্টেইনার এবং নন-ডিফল্ট সেটিংসযুক্ত যেকোনো আইটেমের জন্য পরিষ্কার CSS তৈরি করে — সরাসরি আপনার স্টাইলশিটে কপি করুন। সবকিছু আপনার ব্রাউজারে চলে, কিছুই আপলোড হয় না, এবং একটি রিসেট বাটন আপনাকে পরিষ্কার অবস্থায় ফিরিয়ে আনে।
Flexbox প্লেগ্রাউন্ড কীভাবে ব্যবহার করবেন
- কন্টেইনারের flex-direction, wrap, justify-content, align-items, align-content এবং gap সেট করুন।
- আপনার আসল কম্পোনেন্টের সাথে মেলাতে আইটেম যোগ বা বাদ দিন — ২ থেকে ১২টির মধ্যে।
- একটি আইটেম ক্লিক করে এর grow, shrink, basis, align-self ও order ঠিক করুন।
- প্রতিটি পরিবর্তনে লাইভ প্রিভিউ আপডেট হতে দেখুন।
- তৈরি হওয়া CSS কপি করে আপনার প্রজেক্টে পেস্ট করুন।