Vertical Centering এর জন্য Flexbox ব্যবহার

Flexbox লেআউট মডিউলটি ওয়েব ডিজাইনে Vertical Centering (উল্লম্বভাবে কেন্দ্রীভূত করা) খুব সহজ করে তোলে। প্রাচীন CSS পদ্ধতিগুলোর তুলনায় Flexbox ব্যবহার করে উপাদানগুলোকে উল্লম্বভাবে এবং অনুভূমিকভাবে সহজে কেন্দ্রীভূত করা যায়, যা রেস্পন্সিভ ডিজাইন তৈরিতে সহায়ক।

Vertical Centering (উল্লম্বভাবে কেন্দ্রীভূত করা) এর জন্য Flexbox ব্যবহার

Flexbox-এর align-items এবং justify-content প্রপার্টি ব্যবহার করে উপাদানগুলোকে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত করা সম্ভব।

1. Flex Container-এর জন্য display: flex ব্যবহার:

Flexbox সক্রিয় করার জন্য প্রথমে ফ্লেক্স কন্টেইনারের জন্য display: flex; প্রপার্টি ব্যবহার করতে হবে।

2. align-items: center; দিয়ে উল্লম্বভাবে কেন্দ্র করা:

align-items: center; প্রপার্টি Flex Items-কে Flex Container-এর উল্লম্ব কেন্দ্রে স্থাপন করে। এটি উপাদানগুলোকে কন্টেইনারের উচ্চতার মধ্যে সমানভাবে বিতরণ করে।

3. justify-content: center; দিয়ে অনুভূমিকভাবে কেন্দ্র করা:

justify-content: center; প্রপার্টি Flex Items-কে Flex Container-এর অনুভূমিক কেন্দ্রে স্থাপন করে। এটি উপাদানগুলোকে কন্টেইনারের প্রস্থের মধ্যে সমানভাবে বিতরণ করে।

উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রীভূত করার জন্য Flexbox ব্যবহার:

HTML:

<div class="flex-container">
  <div class="flex-item">Centered Item</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: center;  /* অনুভূমিকভাবে কেন্দ্র */
  align-items: center;      /* উল্লম্বভাবে কেন্দ্র */
  height: 100vh;            /* কন্টেইনারের উচ্চতা 100% ভিউপোর্টের */
  background-color: lightgray; /* কন্টেইনারের ব্যাকগ্রাউন্ড */
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
}

ব্যাখ্যা:

1. display: flex;: এটি Flexbox লেআউট সক্রিয় করে এবং কন্টেইনারকে Flex Container হিসেবে কাজ করতে দেয়।
2. justify-content: center;: এটি ফ্লেক্স আইটেমকে অনুভূমিকভাবে (হরাইজন্টালি) কন্টেইনারের মধ্যে কেন্দ্রীভূত করে।
3. align-items: center;: এটি ফ্লেক্স আইটেমকে উল্লম্বভাবে (ভ্যারটিক্যালি) কন্টেইনারের মধ্যে কেন্দ্রীভূত করে।
4. height: 100vh;: এটি Flex Container এর উচ্চতা 100vh (ভিউপোর্টের উচ্চতা) সেট করে, যাতে ফ্লেক্স আইটেম পুরো পর্দায় সঠিকভাবে কেন্দ্রীভূত হয়।

ফলস্বরূপ আউটপুট:

ফ্লেক্স আইটেমটি পুরো পর্দার মধ্যে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত হবে।

আরও কিছু উদাহরণ:

1. Multiple Items-কে Vertical and Horizontal Centering:

যখন একাধিক ফ্লেক্স আইটেমকে কেন্দ্র করতে চান, তখনও Flexbox ব্যবহার করে খুব সহজেই তা করা সম্ভব।

HTML:

<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>

CSS:

.flex-container {
  display: flex;
  justify-content: center;  /* অনুভূমিকভাবে কেন্দ্র */
  align-items: center;      /* উল্লম্বভাবে কেন্দ্র */
  height: 100vh;
  gap: 20px;                /* আইটেমগুলোর মধ্যে ফাঁকা জায়গা */
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
}

ব্যাখ্যা:

এই কোডে তিনটি ফ্লেক্স আইটেম রয়েছে, এবং Flexbox তাদেরকে উল্লম্ব ও অনুভূমিকভাবে কেন্দ্র করবে। gap: 20px; প্রপার্টি আইটেমগুলোর মধ্যে ২০ পিক্সেল দূরত্ব রাখবে।

কেন Flexbox Vertical Centering সবচেয়ে ভালো পদ্ধতি?

1. সহজ ব্যবহার:
   Flexbox এর মাধ্যমে Vertical Centering একটি অত্যন্ত সহজ এবং কার্যকর পদ্ধতি। পূর্ববর্তী CSS পদ্ধতিগুলোর তুলনায় এটি অনেক সহজ ও দ্রুত কাজ করে।
2. রেস্পন্সিভ ডিজাইন:
   Flexbox স্বয়ংক্রিয়ভাবে উপাদানগুলোকে কন্টেইনারের মধ্যে কেন্দ্রীভূত রাখে, যা রেস্পন্সিভ ডিজাইন তৈরিতে সহায়ক।
3. এডজাস্টেবল এবং নমনীয়:
   Flexbox-এর justify-content এবং align-items প্রপার্টি ব্যবহার করে আপনি উপাদানগুলোকে সহজেই কোনো নির্দিষ্ট অবস্থানে সরিয়ে নিতে পারেন, এবং এতে কোনো অতিরিক্ত কৌশল ব্যবহারের প্রয়োজন হয় না।

সারাংশ

Flexbox ব্যবহার করে Vertical Centering করা খুব সহজ এবং কার্যকরী। justify-content: center; এবং align-items: center; ব্যবহার করে আপনি ফ্লেক্স আইটেমগুলোকে Flex Container-এর মধ্যে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত করতে পারেন। এটি রেস্পন্সিভ ডিজাইনে অত্যন্ত সহায়ক এবং ওয়েব পেজ ডিজাইনকে নমনীয় এবং সুন্দরভাবে সাজাতে সাহায্য করে।