CSS Flexbox-এর পরিচিতি এবং লেআউট ডিজাইন
CSS Flexbox বা ফ্লেক্সিবল বক্স লেআউট হলো একটি এক-মাত্রিক (one-dimensional) লেআউট মডেল, যা একটি কন্টেইনারের ভেতরের আইটেমগুলোর মধ্যে জায়গা বণ্টন এবং বিন্যাসকে সহজ করে তোলে। এটি মূলত রেসপনসিভ ডিজাইন তৈরি করতে এবং বিভিন্ন স্ক্রিন সাইজের সাথে খাপ খাইয়ে নিতে ব্যবহার করা হয়। ফ্লেক্সবক্স জেনারেটর টুলটি ব্যবহার করে কোড লেখার আগেই একটি ফ্লেক্স কন্টেইনার এবং এর ভেতরের আইটেমগুলোর আচরণ ভিজ্যুয়ালি পর্যবেক্ষণ করা যায়। ব্যবহারকারী ইন্টারফেসের বিভিন্ন কন্ট্রোল পরিবর্তন করে লাইভ প্রিভিউ দেখতে পারেন এবং সরাসরি প্রজেক্টে ব্যবহারের জন্য প্রয়োজনীয় CSS কোড সংগ্রহ করতে পারেন।
ফ্লেক্স কন্টেইনারের প্রোপার্টি এবং অক্ষের সম্পর্ক
ফ্লেক্সবক্স লেআউটের মূল ভিত্তি হলো দুটি অক্ষ: প্রধান অক্ষ (main axis) এবং ক্রস অক্ষ (cross axis)। কন্টেইনারের প্রোপার্টিগুলো নির্ধারণ করে যে আইটেমগুলো এই অক্ষ বরাবর কীভাবে সাজানো থাকবে।
- দিকনির্দেশ: এটি প্রধান অক্ষের দিক নির্ধারণ করে।
রো(row) বাবিপরীত রো(row reverse) সিলেক্ট করলে প্রধান অক্ষ অনুভূমিকভাবে কাজ করে। অন্যদিকে,কলাম(column) বাবিপরীত কলাম(column reverse) সিলেক্ট করলে প্রধান অক্ষটি উল্লম্ব হয়ে যায়। এই দিক পরিবর্তনের সাথে সাথেকনটেন্ট জাস্টিফাই করুনএবংআইটেম অ্যালাইন করুনপ্রোপার্টি দুটির কাজের অক্ষও অদলবদল হয়ে যায়। - র্যাপ (Wrap): ডিফল্টভাবে ফ্লেক্স আইটেমগুলো একটি লাইনে থাকার চেষ্টা করে।
র্যাপ ছাড়া(no wrap) অপশনে সব আইটেমকে একটি লাইনে থাকতে বাধ্য করা হয়। কিন্তুর্যাপ(wrap) বাবিপরীত র্যাপ(wrap reverse) সক্রিয় করলে, কন্টেইনারে জায়গা সংকুলান না হলে আইটেমগুলো স্বয়ংক্রিয়ভাবে পরবর্তী লাইনে চলে যায়। - কনটেন্ট জাস্টিফাই করুন: এটি প্রধান অক্ষ বরাবর আইটেমগুলোর বিন্যাস নিয়ন্ত্রণ করে। এর অপশনগুলোর মধ্যে রয়েছে
শুরু(start),শেষ(end),কেন্দ্র(center),মাঝখানে স্পেস(space between),চারপাশে স্পেস(space around) এবংসমানভাবে স্পেস(space evenly)। - আইটেম অ্যালাইন করুন: এটি ক্রস অক্ষ বরাবর আইটেমগুলোর অবস্থান নির্ধারণ করে। এর মানগুলো হলো
শুরু(start),শেষ(end),কেন্দ্র(center),স্ট্রেচ(stretch) এবংবেসলাইন(baseline)। - কনটেন্ট অ্যালাইন করুন: যখন কন্টেইনারে একাধিক লাইন তৈরি হয় (অর্থাৎ র্যাপ সক্রিয় থাকে), তখন এই প্রোপার্টিটি লাইনগুলোর মধ্যবর্তী দূরত্ব এবং বিন্যাস নিয়ন্ত্রণ করে। এটি
শুরু(start),শেষ(end),কেন্দ্র(center),স্ট্রেচ(stretch),মাঝখানে স্পেস(space between),চারপাশে স্পেস(space around) এবংসমানভাবে স্পেস(space evenly) মানে সেট করা যায়। - গ্যাপ (Gap): এটি কোনো মার্জিন ব্যবহার না করেই আইটেমগুলোর পারস্পরিক দূরত্ব এবং লাইনের মধ্যবর্তী ফাঁকা জায়গা নির্ধারণের জন্য একটি নির্দিষ্ট সংখ্যাসূচক মান গ্রহণ করে।
ফ্লেক্স আইটেমের প্রোপার্টি নিয়ন্ত্রণ
কন্টেইনারের পাশাপাশি প্রতিটি আইটেমের নিজস্ব আচরণ আলাদাভাবে নিয়ন্ত্রণ করা সম্ভব। জেনারেটরে কেবল যে আইটেমগুলোর প্রোপার্টি পরিবর্তন করা হয়, CSS-এ শুধুমাত্র সেগুলোর জন্যই আলাদা রুল তৈরি হয়।
- ক্রম (Order): HTML কোডের ক্রম পরিবর্তন না করেই স্ক্রিনে আইটেমটি কোন অবস্থানে দেখাবে তা এই সংখ্যাসূচক মান দিয়ে নির্ধারণ করা যায়।
- গ্রো (Grow): কন্টেইনারে অতিরিক্ত খালি জায়গা থাকলে আইটেমটি অনুপাতে কতটা বড় হবে তা এই সংখ্যাসূচক মান দিয়ে সেট করা হয়।
- শ্রিঙ্ক: জায়গা কম পড়লে আইটেমটি কতটা সংকুচিত বা ছোট হবে তা এই মান দিয়ে নির্ধারিত হয়।
- বেসিস: আইটেমটির প্রাথমিক আকার নির্ধারণ করে। এটি একটি নির্দিষ্ট সংখ্যাসূচক মান বা
স্বয়ংক্রিয়(auto) হতে পারে। - সেলফ অ্যালাইন করুন: কন্টেইনারের সাধারণ অ্যালাইনমেন্ট নিয়মের বাইরে গিয়ে নির্দিষ্ট কোনো আইটেমকে ক্রস অক্ষ বরাবর আলাদাভাবে সাজাতে এটি ব্যবহৃত হয়। এর অপশনগুলো হলো
স্বয়ংক্রিয়(auto),শুরু(start),শেষ(end),কেন্দ্র(center),স্ট্রেচ(stretch) এবংবেসলাইন(baseline)।
সাধারণ লেআউট প্রিসেটসমূহ
ফ্লেক্সবক্সের মাধ্যমে ওয়েব ডিজাইনের বেশ কিছু বহুল ব্যবহৃত লেআউট প্যাটার্ন তৈরি করা যায়। জেনারেটরে এই ধরনের সাধারণ লেআউটগুলো দ্রুত তৈরি করার জন্য কিছু প্রিসেট রয়েছে:
| প্রিসেটের নাম | বিবরণ ও ব্যবহার |
|---|---|
| কেন্দ্র | যেকোনো উপাদানকে কন্টেইনারের ঠিক মাঝখানে (অনুভূমিক ও উল্লম্বভাবে) স্থাপন করতে ব্যবহৃত হয়। |
| ন্যাভবার | ওয়েবসাইটের হেডার বা মেনুবার যেখানে লোগো এবং লিংকগুলো দুই প্রান্তে বা সমান দূরত্বে সাজানো থাকে। |
| স্ট্যাক | উপাদানগুলোকে একটির নিচে আরেকটি উল্লম্বভাবে সাজানোর জন্য ব্যবহৃত হয়। |
| কার্ডসমূহ | গ্রিড বা সারিবদ্ধভাবে একাধিক তথ্যসমৃদ্ধ কার্ড প্রদর্শন করতে এবং স্বয়ংক্রিয়ভাবে লাইনে সাজাতে সাহায্য করে। |
| সাইডবার | মূল কনটেন্টের পাশে একটি নির্দিষ্ট চওড়া বা ফ্লেক্সিবল পার্শ্ববর্তী কলাম তৈরি করতে ব্যবহৃত হয়। |
ব্রাউজার-ভিত্তিক প্রসেসিং এবং ডেটা সুরক্ষা
এই ফ্লেক্সবক্স জেনারেটরটি সম্পূর্ণ স্থানীয়ভাবে কাজ করে। ব্যবহারকারী যখন কন্টেইনারের ডিরেকশন পরিবর্তন করেন, নতুন আইটেম যোগ করতে "আইটেম যোগ করুন" বাটনে ক্লিক করেন, কিংবা আইটেমের সংখ্যা কমাতে "আইটেম বাদ দিন" ব্যবহার করেন, তখন সমস্ত লেআউট সরাসরি ব্যবহারকারীর ব্রাউজারে তৈরি হয়। আপনার কোনো সেটিংস BroBroGo-তে আপলোড করা হয় না। এর ফলে ডেটা সম্পূর্ণ নিজস্ব ডিভাইসেই প্রক্রিয়াজাত হয়। লেআউট ডিজাইন সম্পন্ন হওয়ার পর "CSS কপি করুন" বাটনে ক্লিক করলে তাৎক্ষণিকভাবে কোডটি ক্লিপবোর্ডে কপি হয়ে যায় এবং বাটনের লেখাটি পরিবর্তিত হয়ে "Copied" দেখায়।
প্রায়শই জিজ্ঞাসিত প্রশ্ন (FAQ)
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 মার্জিন ছাড়াই আইটেম এবং লাইনের মধ্যবর্তী দূরত্ব সেট করে।