Flexbox (Flexible Box Layout) হল একটি লেআউট মডেল যা CSS3-এ প্রবর্তিত হয়েছে এবং এটি উপাদানগুলোর মধ্যে স্পেস ব্যবস্থাপনা, সাইজিং এবং এলাইনমেন্ট সহজতর করে। Materialize CSS ফ্রেমওয়ার্কটি Flexbox প্রযুক্তি ব্যবহার করে ওয়েবসাইটের লেআউট তৈরি করার প্রক্রিয়াকে আরও সহজ এবং কার্যকরী করে তোলে।
এখানে Materialize CSS এর মাধ্যমে Flexbox ব্যবহার করে কিভাবে সুন্দর এবং রেসপন্সিভ লেআউট তৈরি করা যায়, তা বিস্তারিতভাবে আলোচনা করা হলো।
Flexbox এর মূল ধারণা
Flexbox একটি লেআউট মডেল যা আপনার HTML উপাদানগুলোকে একটি কন্টেইনারে সাজানোর জন্য সহজ উপায় প্রদান করে। এটি বিশেষত vertical alignment, horizontal alignment, এবং distributing space এর জন্য ব্যবহৃত হয়।
Flexbox এর দুটি মূল অংশ থাকে:
- Flex Container: এটি সেই উপাদান যেটি তার ভেতরের উপাদানগুলোকে ফ্লেক্স আইটেম হিসেবে নিয়ে সাজায়।
- Flex Items: এগুলো সেই উপাদান যা ফ্লেক্স কন্টেইনারের ভেতরে থাকে এবং ফ্লেক্স গুণাবলীর সাহায্যে সাইজ এবং স্থান ভাগাভাগি করে।
Materialize CSS এ Flexbox Layout তৈরি করা
Materialize CSS-এ Flexbox ব্যবহারের জন্য প্রয়োজনীয় কিছু ক্লাস সরবরাহ করা হয়েছে, যেগুলি আপনি সহজেই লেআউট তৈরি করতে ব্যবহার করতে পারেন। এই ক্লাসগুলো হলো flex, center-align, justify-center, align-center, ইত্যাদি।
১. Basic Flexbox Layout
এখানে একটি সোজা Flexbox লেআউট তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Flexbox Layout</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Flexbox Container -->
<div class="container">
<div class="row">
<div class="col s4">
<div class="card-panel teal">Card 1</div>
</div>
<div class="col s4">
<div class="card-panel teal">Card 2</div>
</div>
<div class="col s4">
<div class="card-panel teal">Card 3</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
- row: Flexbox কন্টেইনার। Materialize CSS-এ row ক্লাস ব্যবহৃত হয়, যা ফ্লেক্স আইটেমগুলোর জন্য একটি কন্টেইনার হিসেবে কাজ করে।
- col s4: ফ্লেক্স আইটেম হিসেবে তিনটি কলাম তৈরি করা হয়েছে, যেগুলি স্ক্রীনের ৪৩৩৩৩৩% জায়গা নেবে।
২. Centering Flex Items Vertically and Horizontally
Flexbox এর মাধ্যমে আপনি সহজেই উপাদানগুলিকে সেন্টার (অথবা একে অন্যের উপর উপযুক্তভাবে স্থাপন) করতে পারেন।
<div class="container">
<div class="row" style="height: 400px;">
<div class="col s12 flex-center">
<div class="card-panel teal">Centered Content</div>
</div>
</div>
</div>
এখানে:
- flex-center: Flexbox ব্যবহারের মাধ্যমে কন্টেন্টটিকে horizontal এবং vertical দুইভাবে সেন্টার করা হয়েছে। Materialize CSS-এ flex-center ক্লাস ব্যবহার করে আপনি একযোগভাবে justify-center এবং align-center ইফেক্ট পেতে পারেন।
৩. Aligning Items with Flexbox
Flexbox দিয়ে সহজেই আপনি উপাদানগুলোকে সঠিকভাবে সারিবদ্ধ (align) করতে পারেন। যেমন:
- justify-center: উপাদানগুলোকে অনুভূমিকভাবে সেন্টার করা।
- align-center: উপাদানগুলোকে উল্লম্বভাবে সেন্টার করা।
<div class="container">
<div class="row" style="height: 400px;">
<div class="col s12 flex-align-center">
<div class="card-panel teal">Centered Item Vertically</div>
</div>
</div>
</div>
এখানে:
- flex-align-center: উপাদানকে উল্লম্বভাবে সেন্টার করবে।
৪. Distributing Space Between Items
Flexbox এর আরেকটি শক্তিশালী বৈশিষ্ট্য হল উপাদানগুলোর মধ্যে space distribution। Materialize CSS-এ এই কাজের জন্য space-between এবং space-evenly ক্লাস ব্যবহার করা যায়।
<div class="container">
<div class="row">
<div class="col s4 flex-space-between">
<div class="card-panel teal">Card 1</div>
<div class="card-panel teal">Card 2</div>
</div>
</div>
</div>
এখানে:
- flex-space-between: উপাদানগুলোর মধ্যে সমান জায়গা ভাগাভাগি করবে।
৫. Flexbox with Nested Layout
আপনি Flexbox এর মধ্যে nested layout তৈরি করতে পারেন। এতে আপনি একটি Flexbox কন্টেইনারের ভেতরে আরও Flexbox কন্টেইনার রাখতে পারেন।
<div class="container">
<div class="row">
<div class="col s6">
<div class="card-panel teal">Card 1</div>
</div>
<div class="col s6">
<div class="row">
<div class="col s6">
<div class="card-panel teal">Card 2</div>
</div>
<div class="col s6">
<div class="card-panel teal">Card 3</div>
</div>
</div>
</div>
</div>
</div>
এখানে:
- Nested Flexbox: একটি Flexbox কন্টেইনারের মধ্যে অন্য একটি Flexbox কন্টেইনার তৈরি করা হয়েছে, যাতে আপনি আরও ইনটুইটিভ লেআউট তৈরি করতে পারেন।
উপসংহার
Materialize CSS-এ Flexbox ব্যবহারের মাধ্যমে আপনি ওয়েবসাইটে বা অ্যাপ্লিকেশনে অত্যন্ত কার্যকরী, আধুনিক এবং রেসপন্সিভ লেআউট তৈরি করতে পারেন। Flexbox প্রযুক্তি ওয়েব ডেভেলপমেন্টে ব্যবহৃত একটি অত্যন্ত শক্তিশালী টুল, যা উপাদানগুলোর মধ্যে স্থান ভাগাভাগি, সেন্টারিং এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরির ক্ষেত্রে সহায়তা করে। Materialize CSS এর মাধ্যমে এই লেআউট তৈরি করা সহজ এবং দ্রুত, এবং এটি ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও উন্নত করে।
Read more
