Flexbox (Flexible Box Layout) হলো CSS-এর একটি লেআউট মডিউল, যা ওয়েবসাইট ডিজাইনে উপাদানগুলোর (elements) লেআউট সহজ, নমনীয় এবং কার্যকরভাবে সজ্জিত করতে ব্যবহৃত হয়। এটি এক-মাত্রিক লেআউট তৈরি করার জন্য ডিজাইন করা হয়েছে, যেখানে উপাদানগুলো একই সারি (row) বা কলামে (column) সাজানো হয়।
Flexbox প্রধানত উপাদানগুলোর মধ্যে স্থান (space) এবং তাদের বিন্যাস (alignment) নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি ওয়েব ডিজাইনের রেস্পন্সিভ লেআউট তৈরিতে অত্যন্ত জনপ্রিয় এবং কার্যকরী একটি পদ্ধতি।
Flexbox-এর কাজের ধরন
Flexbox মূলত দুটি প্রধান ধারণার উপর ভিত্তি করে কাজ করে:
- Flex Container (ফ্লেক্স কন্টেইনার): ফ্লেক্স কন্টেইনার হলো সেই উপাদান, যার ভেতরে অন্য উপাদানগুলো ফ্লেক্স আইটেম হিসেবে অবস্থান করে। এটি সক্রিয় করতে কন্টেইনারে
display: flex;প্রপার্টি ব্যবহার করা হয়। - Flex Items (ফ্লেক্স আইটেম): ফ্লেক্স কন্টেইনারের মধ্যে থাকা শিশু উপাদানগুলো ফ্লেক্স আইটেম হিসেবে কাজ করে। Flexbox-এর নিয়ম অনুযায়ী এগুলো সাজানো এবং বিন্যস্ত হয়।
Flexbox-এর প্রধান বৈশিষ্ট্য
- নমনীয়তা (Flexibility): উপাদানগুলো পর্দার আকার অনুযায়ী স্বয়ংক্রিয়ভাবে পুনর্বিন্যস্ত হয়।
- সঠিক বিন্যাস (Alignment): উপাদানগুলো অনুভূমিক এবং উল্লম্ব উভয় অক্ষে কেন্দ্রীভূত বা স্থাপন করা যায়।
- স্থান ব্যবস্থাপনা (Space Management): উপাদানগুলোর মধ্যে স্থান সমানভাবে বিতরণ বা নির্দিষ্টভাবে নিয়ন্ত্রণ করা সম্ভব।
- সহজ রেস্পন্সিভ লেআউট: Flexbox রেস্পন্সিভ ডিজাইনে সহজেই খাপ খাইয়ে নেয়।
Flexbox-এর উদাহরণ
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
.flex-container {
display: flex;
justify-content: space-between; /* আইটেমগুলোর মধ্যে সমান দূরত্ব তৈরি করবে */
align-items: center; /* আইটেমগুলোকে উল্লম্বভাবে কেন্দ্র করবে */
background-color: #f0f0f0;
padding: 10px;
}
.flex-item {
background-color: #007bff;
color: white;
padding: 15px;
margin: 5px;
text-align: center;
}
উপরের উদাহরণে Flexbox-এর মাধ্যমে উপাদানগুলো একই সারিতে সাজানো হয়েছে এবং তাদের মধ্যে স্থান ও বিন্যাসের নিয়ন্ত্রণ করা হয়েছে।
Content added By
Read more
