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 কপি করে আপনার প্রজেক্টে পেস্ট করুন।