ফ্লেক্সবক্স জেনারেটর
ভিজ্যুয়াল কন্ট্রোল দিয়ে একটি ফ্লেক্স কন্টেইনার এবং এর আইটেমগুলো সেট আপ করুন, লাইভ লেআউট পরিবর্তন দেখুন এবং এক ক্লিকে CSS কপি করুন।
আপনার লেআউট সরাসরি আপনার ব্রাউজারে তৈরি হয়। আপনার কোনো সেটিংস BroBroGo-তে আপলোড করা হয় না।
জিজ্ঞাসিত প্রশ্নাবলী
justify-content এবং align-items-এর মধ্যে পার্থক্য কী?
Justify-content আইটেমগুলোকে প্রধান অক্ষ (main axis) বরাবর সাজায় — যেদিকে রো বা কলাম প্রবাহিত হয় — আর align-items সেগুলোকে অন্য অক্ষ বরাবর স্থাপন করে। দিকটি row থেকে column-এ পরিবর্তন করলে অক্ষ দুটি অদলবদল হয়ে যায়, ফলে justify-content উপর থেকে নিচে এবং align-items বাম থেকে ডানে কাজ করা শুরু করে।
প্রতি আইটেমের কন্ট্রোলগুলো কীভাবে কাজ করে?
যেকোনো আইটেম তার নম্বর দিয়ে নির্বাচন করুন, তারপর এটি অতিরিক্ত জায়গা পূরণ করতে কতটা বাড়বে (grow), জায়গা কম হলে কতটা ছোট হবে (shrink), এর শুরুর আকার (basis) এবং এর নিজস্ব ক্রস-অক্ষ বিন্যাস সেট করুন। Order-এর মাধ্যমে HTML স্পর্শ না করেই স্ক্রিনে কোনো আইটেম আগে বা পরে নেওয়া যায়। আপনি যে আইটেমগুলো পরিবর্তন করবেন কেবল সেগুলোর জন্যই CSS-এ নিজস্ব রুল তৈরি হবে।
wrap এবং align-content কখন গুরুত্বপূর্ণ হয়ে ওঠে?
র্যাপিং (wrapping) বন্ধ থাকলে, প্রতিটি আইটেমকে একটি লাইনে থাকতে বাধ্য করা হয় এবং সেগুলো সংকুচিত হতে পারে। এটি চালু করলে যে আইটেমগুলো লাইনে ধরে না, সেগুলো পরবর্তী লাইনে চলে যায় — তখনই align-content কাজ শুরু করে এবং লাইনগুলোকে একটি গ্রুপ হিসেবে সাজায়। Gap মার্জিন ছাড়াই আইটেম এবং লাইনের মধ্যবর্তী দূরত্ব সেট করে।