Horizontal অক্ষ বরাবর আইটেমের অবস্থান নিয়ন্ত্রণ

Flexbox (Flexible Box) লেআউট মডেলটির মাধ্যমে আপনি উপাদানগুলোর অবস্থান খুব সহজে নিয়ন্ত্রণ করতে পারেন। বিশেষত Horizontal অক্ষে (যেমন, অনুভূমিকভাবে) Flex Items-এর অবস্থান নিয়ন্ত্রণ করার জন্য justify-content এবং align-items প্রপার্টি ব্যবহৃত হয়। এই প্রপার্টিগুলোর সাহায্যে আপনি ওয়েব ডিজাইনের উপাদানগুলোর মধ্যে স্থান ব্যবস্থাপনা এবং তাদের অনুভূমিক বিন্যাস সহজেই করতে পারেন।

Horizontal অক্ষ বরাবর আইটেমের অবস্থান নিয়ন্ত্রণ

justify-content

justify-content প্রপার্টি Flex Container-এর অনুভূমিক অক্ষ বরাবর Flex Items-এর অবস্থান নিয়ন্ত্রণ করে। এটি উপাদানগুলোর মধ্যে স্থান নিয়ন্ত্রণের জন্য ব্যবহৃত হয় এবং বিভিন্ন মানের মাধ্যমে আপনি আইটেমগুলোর বিন্যাস ঠিক করতে পারেন।

justify-content এর মানসমূহ:

1. flex-start:
   ফ্লেক্স আইটেমগুলো কনটেইনারের শুরুতে (বামপাশে) স্থাপন করা হয়। এটি ডিফল্ট মান।

   .flex-container {
     display: flex;
     justify-content: flex-start;
   }
   

2. flex-end:
   ফ্লেক্স আইটেমগুলো কনটেইনারের শেষে (ডানপাশে) স্থাপন করা হয়।

   .flex-container {
     display: flex;
     justify-content: flex-end;
   }
   

3. center:
   ফ্লেক্স আইটেমগুলো কনটেইনারের কেন্দ্রের মধ্যে অনুভূমিকভাবে সজ্জিত হয়।

   .flex-container {
     display: flex;
     justify-content: center;
   }
   

4. space-between:
   ফ্লেক্স আইটেমগুলোর মধ্যে সমান দূরত্ব তৈরি হয়, তবে প্রথম এবং শেষ আইটেম কনটেইনারের প্রান্তে অবস্থান করে।

   .flex-container {
     display: flex;
     justify-content: space-between;
   }
   

5. space-around:
   ফ্লেক্স আইটেমগুলোর মধ্যে সমান প্যাডিং এবং দূরত্ব তৈরি হয়, তবে প্রথম এবং শেষ আইটেমের চারপাশেও প্যাডিং থাকবে।

   .flex-container {
     display: flex;
     justify-content: space-around;
   }
   

6. space-evenly:
   ফ্লেক্স আইটেমগুলোর মধ্যে সমান দূরত্ব তৈরি হয়, এবং প্রথম ও শেষ আইটেমের মধ্যে দূরত্বও সমান থাকে।

   .flex-container {
     display: flex;
     justify-content: space-evenly;
   }
   

উদাহরণ: Horizontal অক্ষ বরাবর আইটেমের অবস্থান

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: space-between; /* আইটেমগুলোর মধ্যে সমান দূরত্ব তৈরি হবে */
  background-color: lightgray;
  padding: 10px;
}

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

আউটপুট:

এই কোডে Flex Items গুলো justify-content: space-between; এর মাধ্যমে সমান দূরত্বে অনুভূমিকভাবে সাজানো হবে। প্রথম এবং শেষ আইটেম কনটেইনারের প্রান্তে থাকবে এবং মাঝের আইটেমগুলোর মধ্যে সমান জায়গা থাকবে।

align-items এর সাহায্যে উল্লম্ব অবস্থান নিয়ন্ত্রণ

যদিও justify-content অনুভূমিক (horizontal) অক্ষে আইটেমের অবস্থান নিয়ন্ত্রণ করে, align-items প্রপার্টি Flex Items-এর উল্লম্ব (vertical) অবস্থান নিয়ন্ত্রণ করে। এটি Flex Container-এর ভিতরে উল্লম্বভাবে আইটেমগুলোর অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।

.flex-container {
  display: flex;
  justify-content: center; /* অনুভূমিকভাবে কেন্দ্র */
  align-items: center;     /* উল্লম্বভাবে কেন্দ্র */
}

এটি Flex Items গুলোকে উল্লম্ব এবং অনুভূমিক উভয় দিকেই কেন্দ্রীভূত করে।

সারাংশ

• justify-content Flex Items-এর অনুভূমিক অবস্থান নিয়ন্ত্রণ করে এবং তাদের মধ্যে স্থান ব্যবস্থাপনা করে।
• align-items Flex Items-এর উল্লম্ব অবস্থান নিয়ন্ত্রণ করে এবং তাদের কন্টেইনারের উল্লম্ব কেন্দ্রে বা প্রান্তে সজ্জিত করে।
• Flexbox ব্যবহার করে আপনি খুব সহজে আইটেমগুলোর বিন্যাস এবং স্থান নিয়ন্ত্রণ করতে পারেন, যা রেস্পন্সিভ ওয়েব ডিজাইনে সহায়ক।

এই প্রপার্টিগুলো ব্যবহার করে আপনি একটি নমনীয় এবং কার্যকর লেআউট ডিজাইন তৈরি করতে পারবেন, যেখানে উপাদানগুলো যেকোনো স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হবে।