Materialize CSS একটি আধুনিক এবং ব্যবহারকারী-বান্ধব ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Flexbox সিস্টেম সমর্থন করে। Flexbox হলো একটি লেআউট মডেল যা এলিমেন্টগুলিকে আরও সহজভাবে এবং কার্যকরভাবে সজ্জিত করতে সহায়ক, বিশেষ করে যখন ডিসপ্লে এলিমেন্টগুলি স্থানান্তর, সাইজিং বা সারিবদ্ধ করার ক্ষেত্রে কমপ্লেক্স স্টাইল প্রয়োজন হয়। Materialize CSS ফ্রেমওয়ার্কে Flexbox সিস্টেম ব্যবহার করা সহজ, এবং এটি ওয়েব পেজের লেআউট তৈরি করার জন্য অত্যন্ত শক্তিশালী একটি টুল।
এখানে Materialize CSS এর Flexbox সিস্টেমের ব্যবহার এবং এর সুবিধাগুলি বিস্তারিতভাবে আলোচনা করা হলো।
Flexbox System কি?
Flexbox বা Flexible Box Layout একটি CSS লেআউট মডেল যা এলিমেন্টগুলির মধ্যে স্থান এবং আকার নিয়ন্ত্রণের জন্য ব্যবহৃত হয়। এটি এলিমেন্টগুলিকে বিভিন্ন দিক থেকে সহজে সজ্জিত করতে সাহায্য করে, বিশেষ করে vertical alignment এবং horizontal alignment এর ক্ষেত্রে।
Materialize CSS তে Flexbox সিস্টেমের মাধ্যমে আপনি কন্টেন্ট সোজাসাপ্টা, রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ লেআউট তৈরি করতে পারেন। Flexbox ক্লাসের মাধ্যমে আপনি সহজে flex containers এবং flex items তৈরি করতে পারেন।
Materialize CSS এর Flexbox System এর ব্যবহার
১. Flex Containers
Flexbox সিস্টেমে Flex Containers (ফ্লেক্স কন্টেইনার) হলো এমন এলিমেন্ট যা তার অভ্যন্তরীণ এলিমেন্টগুলোকে flex items (ফ্লেক্স আইটেম) হিসেবে পরিচালনা করে। Materialize CSS এ flex-container ক্লাস ব্যবহৃত হয় ফ্লেক্স কন্টেইনার তৈরি করতে।
উদাহরণ: Basic Flex Container
<div class="container">
<div class="row">
<div class="col s4">Column 1</div>
<div class="col s4">Column 2</div>
<div class="col s4">Column 3</div>
</div>
</div>
এখানে:
- row ক্লাসটি একটি ফ্লেক্স কন্টেইনার হিসেবে কাজ করে, যা ইনলাইন-ফ্লেক্স আইটেমগুলিকে column ক্লাসের মাধ্যমে সজ্জিত করে।
২. Flex Items
Flex items হলো এমন উপাদান যা ফ্লেক্স কন্টেইনারের মধ্যে থাকে এবং ফ্লেক্স কন্টেইনারের মধ্যে স্থান, আকার এবং অ্যালাইনমেন্টের নিয়ন্ত্রণ করা হয়।
উদাহরণ: Flexbox এর মাধ্যমে Alignment
<div class="container">
<div class="row">
<div class="col s4">Item 1</div>
<div class="col s4 offset-s4">Item 2</div>
</div>
</div>
এখানে:
- offset-s4 ক্লাসটি আইটেম ২ (Item 2) কে সোজা করে, যাতে এটি পরবর্তী আইটেম থেকে একধাপ সরে থাকে।
৩. Centering Items Using Flexbox
Flexbox সিস্টেমের মাধ্যমে আপনি খুব সহজে এলিমেন্টগুলোকে horizontal এবং vertical উভয়ভাবে সেন্টার করতে পারেন।
উদাহরণ: Centering Items (Horizontally and Vertically)
<div class="container">
<div class="row">
<div class="col s12 center-align">
<h5>Centered Content</h5>
</div>
</div>
</div>
এখানে:
- center-align ক্লাসটি ফ্লেক্স কন্টেইনারের মধ্যে আইটেমটিকে অনুভূমিকভাবে সেন্টার করে।
- Materialize CSS এ center-align ক্লাসটি এলিমেন্টকে উল্লম্বভাবে এবং অনুভূমিকভাবে সেন্টার করার জন্য ব্যবহৃত হয়।
৪. Flexbox Alignment Options
Flexbox সিস্টেমে justify-content, align-items, এবং align-self এর মতো প্রপার্টি ব্যবহার করে আইটেমগুলোর অবস্থান এবং বিন্যাস নিয়ন্ত্রণ করা যায়। Materialize CSS এর মাধ্যমে এগুলোর কাস্টমাইজেশন করা সম্ভব।
উদাহরণ: Justify Content (Horizontal Alignment)
<div class="row">
<div class="col s4">Item 1</div>
<div class="col s4">Item 2</div>
<div class="col s4">Item 3</div>
</div>
এখানে:
- justify-content ফ্লেক্স কন্টেইনারের এলিমেন্টগুলোর মধ্যে সঠিক গ্যাপ বা স্থানের নিয়ন্ত্রণ করতে সহায়তা করে।
উদাহরণ: Align Items (Vertical Alignment)
<div class="row valign-wrapper">
<div class="col s4">Item 1</div>
<div class="col s4">Item 2</div>
<div class="col s4">Item 3</div>
</div>
এখানে:
- valign-wrapper ক্লাসটি ব্যবহার করা হয়েছে যা আইটেমগুলিকে উল্লম্বভাবে সেন্টার করবে।
৫. Flexbox Responsiveness
Materialize CSS তে Flexbox এর মাধ্যমে রেসপন্সিভ ডিজাইন তৈরি করা খুবই সহজ। আপনি grid system এর মাধ্যমে বিভিন্ন স্ক্রীন সাইজের জন্য লেআউট কাস্টমাইজ করতে পারেন।
উদাহরণ: Responsive Flexbox Layout
<div class="row">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-content">
<span class="card-title">Card 1</span>
<p>Some content for the first card.</p>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card">
<div class="card-content">
<span class="card-title">Card 2</span>
<p>Some content for the second card.</p>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card">
<div class="card-content">
<span class="card-title">Card 3</span>
<p>Some content for the third card.</p>
</div>
</div>
</div>
</div>
এখানে:
- col s12 m6 l4: এটি রেসপন্সিভ গ্রিড সিস্টেমে ব্যবহৃত হয়ে লেআউটের উপাদানগুলিকে বিভিন্ন ডিভাইসের জন্য কাস্টমাইজ করে (12-কলাম সিস্টেম)।
- s12: মোবাইল ডিভাইসে পুরো সারি দখল করবে।
- m6: ট্যাবলেটে ৬ কলাম দখল করবে।
- l4: ডেস্কটপে ৪ কলাম দখল করবে।
উপসংহার
Materialize CSS এর Flexbox সিস্টেম ওয়েব ডিজাইন এবং ডেভেলপমেন্টে একটি অত্যন্ত শক্তিশালী টুল। এর মাধ্যমে আপনি সহজেই লেআউট তৈরি করতে পারেন যা রেসপন্সিভ, ফ্লেক্সিবল এবং ইন্টারঅ্যাকটিভ। Flexbox সিস্টেমের মাধ্যমে আপনি উপাদানগুলিকে সহজে সজ্জিত, সেন্টার, এবং অ্যালাইন করতে পারেন। Materialize CSS আপনাকে এর grid system এবং flex containers এর মাধ্যমে সজ্জিত, রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করে, যা আপনার ওয়েবসাইটের লেআউটকে আরও উন্নত এবং দৃষ্টিনন্দন করে তোলে।
Read more
