CSS Flexbox কী?
CSS Flexbox (Flexible Box Layout) হল একটি এক-মাত্রিক লেআউট মডেল যা একটি সারি বা কলামে স্থান বিতরণ করতে এবং আইটেমগুলি সারিবদ্ধ করতে ব্যবহৃত হয়। flex কন্টেইনারটি display: flex দিয়ে সংজ্ঞায়িত হয় এবং এর সরাসরি শিশুরা flex আইটেম হয়ে যায়। মূল কন্টেইনার বৈশিষ্ট্য: flex-direction (সারি বা কলাম), flex-wrap (একক বনাম মাল্টি-লাইন), justify-content (প্রধান-অক্ষ সারিবদ্ধতা), align-items (প্রতি লাইনে ক্রস-অক্ষ সারিবদ্ধতা), এবং align-content (একাধিক লাইনের ক্রস-অক্ষ সারিবদ্ধতা)। মূল আইটেম বৈশিষ্ট্য: flex-grow (একটি আইটেম কতটা বাড়ে), flex-shrink (কতটা সংকুচিত হয়), flex-basis (প্রাথমিক আকার), এবং align-self (নির্দিষ্ট আইটেমের জন্য কন্টেইনারের align-items ওভাররাইড করে)। Flexbox নেভিগেশন বার, কার্ড সারি, কেন্দ্রীভূত লেআউট এবং যেকোনো এক-মাত্রিক বিন্যাসের জন্য আদর্শ।
CSS Flexbox জেনারেটর কীভাবে ব্যবহার করবেন
-
ড্রপডাউন এবং ইনপুট ব্যবহার করে কন্টেইনার বৈশিষ্ট্যগুলি (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) সামঞ্জস্য করুন।
-
নির্বাচন করতে প্রিভিউতে যেকোনো আইটেমে ক্লিক করুন (কমলা রঙ হয়ে যায়)।
-
আইটেম প্যানেলে নির্বাচিত আইটেমের flex-grow, flex-shrink, flex-basis এবং align-self সেট করুন।
-
আরও আইটেম যোগ করতে '+ আইটেম যোগ করুন' ক্লিক করুন; নির্বাচিত আইটেম মুছতে 'সরান' ক্লিক করুন।
-
জেনারেট করা কোড দেখতে CSS এবং HTML ট্যাবের মধ্যে স্যুইচ করুন, তারপর কপি করুন ক্লিক করুন।
-
ডিফল্ট ৩-আইটেম লেআউট দিয়ে নতুন করে শুরু করতে 'সব রিসেট করুন' ক্লিক করুন।