Align Content (মাল্টি-লাইন ফ্লেক্স আইটেমের অবস্থান নিয়ন্ত্রণ)

Align Content কী?

align-content হলো Flexbox-এর একটি প্রপার্টি, যা মাল্টি-লাইন ফ্লেক্স আইটেম এর মধ্যে স্থান নির্ধারণ এবং তাদের উল্লম্বভাবে (vertical) সাজানোর জন্য ব্যবহৃত হয়। যখন Flex Items অনেক বেশি হয়ে একাধিক লাইনে (lines) থাকে, তখন align-content ব্যবহার করে তাদের মধ্যে ফাঁকা স্থান এবং তাদের সঠিক বিন্যাস নিয়ন্ত্রণ করা হয়।

Align Content-এর প্রয়োগ ক্ষেত্র

align-content শুধুমাত্র তখন কার্যকর হয় যখন Flex Items-এর সংখ্যা এমনভাবে থাকে যে তারা একাধিক লাইনে (wrap) বিভক্ত হয়। এক লাইনে থাকা আইটেমগুলোর জন্য এটি কোনো প্রভাব ফেলে না।

Align Content-এর মানসমূহ

1. flex-start
   Flex Items গুলো কনটেইনারের শীর্ষে (top) অবস্থান করবে।

   .flex-container {
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
   }
   

2. flex-end
   Flex Items গুলো কনটেইনারের নিচে (bottom) অবস্থান করবে।

   .flex-container {
     display: flex;
     flex-wrap: wrap;
     align-content: flex-end;
   }
   

3. center
   Flex Items গুলো কনটেইনারের উল্লম্ব মাঝখানে অবস্থান করবে।

   .flex-container {
     display: flex;
     flex-wrap: wrap;
     align-content: center;
   }
   

4. space-between
   Flex Items গুলোর মধ্যে সমান জায়গা তৈরি হবে এবং প্রথম এবং শেষ লাইনের মধ্যে কোনো স্থান থাকবে না।

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

5. space-around
   Flex Items গুলোর মধ্যে সমান জায়গা তৈরি হবে এবং প্রথম এবং শেষ লাইনের আগে ও পরে সমান জায়গা থাকবে।

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

6. stretch (ডিফল্ট)
   Flex Items গুলো কনটেইনারের উচ্চতা অনুযায়ী প্রসারিত হবে, যাতে তারা পুরো কনটেইনারে সমানভাবে স্থান নিতে পারে।

   .flex-container {
     display: flex;
     flex-wrap: wrap;
     align-content: stretch;  /* ডিফল্ট মান */
   }
   

Align Content ব্যবহার উদাহরণ

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 class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* আইটেমগুলোর লাইন ব্রেক করতে */
  align-content: center; /* আইটেমগুলোকে উল্লম্বভাবে মাঝখানে সাজাতে */
  height: 300px; /* কনটেইনারের উচ্চতা */
}

.flex-item {
  width: 100px;
  height: 50px;
  background-color: teal;
  color: white;
  margin: 10px;
  text-align: center;
}

আউটপুট:

এখানে, align-content: center ব্যবহৃত হওয়ায় ফ্লেক্স আইটেমগুলো কনটেইনারের উল্লম্ব মধ্যভাগে সজ্জিত হবে, কারণ তারা একাধিক লাইনে সজ্জিত হয়েছে।

Align Content এর ব্যবহার যখন প্রয়োজন?

• মাল্টি-লাইন লেআউট: যখন Flexbox কনটেইনারের মধ্যে অনেক ফ্লেক্স আইটেম থাকে এবং তারা একাধিক লাইনে বিভক্ত হয়ে যায়, তখন align-content ব্যবহার করা হয় তাদের মধ্যে ফাঁকা স্থান বা বিন্যাস নিয়ন্ত্রণ করার জন্য।
• রেস্পন্সিভ ডিজাইন: বড় পর্দায় উপাদানগুলো অনুভূমিকভাবে সাজানো যেতে পারে, তবে ছোট পর্দায় তাদের উল্লম্বভাবে সজ্জিত হতে হতে পারে, এবং align-content এর মাধ্যমে তাদের সঠিক বিন্যাস নিয়ন্ত্রণ করা যায়।
• স্থান ব্যবস্থাপনা: যখন কনটেইনারের মধ্যে অতিরিক্ত স্থান থাকে, তখন align-content ব্যবহার করে এই জায়গাটি পূর্ণ করা বা আইটেমগুলোর মাঝে সমানভাবে বিতরণ করা যায়।

Align Content এর সারাংশ

• align-content শুধুমাত্র মাল্টি-লাইন ফ্লেক্স আইটেম এর জন্য কার্যকর, এক লাইনে থাকা আইটেমগুলোর জন্য এটি প্রভাবিত হয় না।
• এটি ফ্লেক্স কনটেইনার এর উচ্চতা অনুযায়ী ফ্লেক্স আইটেমগুলোর মধ্যে স্থান এবং বিন্যাস নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
• এর বিভিন্ন মান যেমন flex-start, flex-end, center, space-between, space-around, এবং stretch এর মাধ্যমে Flex Items-এর অবস্থান নিয়ন্ত্রণ করা যায়।

align-content কী?

align-content হলো Flexbox-এর একটি প্রপার্টি যা Flex Container-এর মধ্যে থাকা মাল্টি-লাইন Flex Items-এর উল্লম্ব (vertical) বিন্যাস নিয়ন্ত্রণ করে। এটি মূলত কেবল তখনই কার্যকরী, যখন Flex Items একাধিক লাইনে বিভক্ত হয়, অর্থাৎ যখন flex-wrap: wrap; ব্যবহার করা হয় এবং অনেক আইটেম থাকে যা এক লাইনে ধরতে পারে না।

এটি Flex Items-এর মধ্যে উল্লম্বভাবে স্থান ব্যবস্থাপনা করতে সাহায্য করে, যেমন: উপরের বা নিচের দিকে পুশ করা, সমানভাবে সঞ্চালন করা, বা নির্দিষ্ট অবস্থানে রাখার জন্য।

align-content প্রপার্টির মানসমূহ

align-content প্রপার্টি ৬টি মূল মানে কাজ করে, যা Flex Items-এর ভরের সাথে উল্লম্ব বিন্যাস এবং স্থান নিয়ন্ত্রণ করে:

1. flex-start:

   • Flex Items গুলি কন্টেইনারের উপরের দিকে সমবেত হবে।

   .flex-container {
     align-content: flex-start;
   }
   

2. flex-end:

   • Flex Items গুলি কন্টেইনারের নিচের দিকে সমবেত হবে।

   .flex-container {
     align-content: flex-end;
   }
   

3. center:

   • Flex Items গুলি কন্টেইনারের কেন্দ্রবিন্দুতে সমবেত হবে।

   .flex-container {
     align-content: center;
   }
   

4. space-between:

   • Flex Items গুলোর মধ্যে সমান ফাঁক রেখে বিন্যস্ত হবে, তবে প্রথম এবং শেষ আইটেমের মধ্যে কোনো ফাঁকা জায়গা থাকবে না।

   .flex-container {
     align-content: space-between;
   }
   

5. space-around:

   • Flex Items গুলোর মধ্যে সমান ফাঁক থাকবে, তবে প্রথম এবং শেষ আইটেমের চারপাশেও ফাঁকা জায়গা থাকবে।

   .flex-container {
     align-content: space-around;
   }
   

6. stretch (ডিফল্ট):

   • Flex Items গুলি কন্টেইনারের পূর্ণ উল্লম্ব স্থানটিকে দখল করবে।

   .flex-container {
     align-content: stretch;
   }
   

align-content এবং align-items এর মধ্যে পার্থক্য

• align-items: একক লাইনে থাকা Flex Items-এর উল্লম্ব বিন্যাস নিয়ন্ত্রণ করে। এটি Flex Items-এর একক লাইনের জন্য প্রযোজ্য।
• align-content: মাল্টি-লাইনের Flex Items-এর উল্লম্ব বিন্যাস নিয়ন্ত্রণ করে। এটি শুধুমাত্র তখনই কার্যকরী যখন Flex Items একাধিক লাইনে বিভক্ত হয়।

উদাহরণ: align-content প্রপার্টির ব্যবহার

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 class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* একাধিক লাইনে ফ্লেক্স আইটেমগুলো সাজানো হবে */
  justify-content: space-between;
  align-content: center; /* Flex Items-কে উল্লম্বভাবে কেন্দ্রে রাখবে */
  height: 300px; /* কন্টেইনারের উচ্চতা */
}

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

আউটপুট:

এখানে, Flex Items গুলি একাধিক লাইনে বিভক্ত হবে এবং align-content: center; প্রপার্টির কারণে কন্টেইনারের কেন্দ্রের কাছে উল্লম্বভাবে সজ্জিত হবে।

সারাংশ

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

Flexbox-এর justify-content এবং align-items প্রপার্টি গুলি ব্যবহার করে উপাদানগুলোর বিন্যাস এবং স্থান নিয়ন্ত্রণ করা যায়। এই প্রপার্টিগুলোর মান হিসেবে flex-start, flex-end, center, space-between, space-around, এবং stretch ব্যবহার করা হয়। এগুলোর সাহায্যে আপনি উপাদানগুলোর স্থান এবং বিন্যাস নিয়ন্ত্রণ করতে পারবেন।

justify-content প্রপার্টি

justify-content প্রপার্টি Flex Container-এর অনুভূমিক অক্ষে (horizontal axis) উপাদানগুলোর স্থান এবং বিন্যাস নির্ধারণ করে।

1. flex-start

• ব্যবহার: উপাদানগুলো কন্টেইনারের শুরুতে, অর্থাৎ বাম দিকের দিকে বিন্যস্ত হবে।
• বর্ণনা: এটি justify-content এর ডিফল্ট মান।

.flex-container {
  display: flex;
  justify-content: flex-start; /* উপাদানগুলো বাম দিকের দিকে সাজানো */
}

2. flex-end

• ব্যবহার: উপাদানগুলো কন্টেইনারের শেষে, অর্থাৎ ডান দিকের দিকে বিন্যস্ত হবে।
• বর্ণনা: এটি উপাদানগুলোকে ডানদিকে নিয়ে যায়।

.flex-container {
  display: flex;
  justify-content: flex-end; /* উপাদানগুলো ডান দিকের দিকে সাজানো */
}

3. center

• ব্যবহার: উপাদানগুলো কন্টেইনারের মাঝখানে (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. stretch

• ব্যবহার: উপাদানগুলোর আকার কন্টেইনারের পুরো গ্যাপ অনুসারে প্রসারিত হবে।
• বর্ণনা: এটি align-items এর জন্য ব্যবহৃত হয় এবং উপাদানগুলোকে উল্লম্বভাবে প্রসারিত করে কন্টেইনারের উচ্চতা পূর্ণ করে।

.flex-container {
  display: flex;
  justify-content: stretch; /* উপাদানগুলো প্রসারিত হবে */
}

align-items প্রপার্টি

align-items প্রপার্টি Flex Container-এর উল্লম্ব অক্ষে (vertical axis) উপাদানগুলোর বিন্যাস এবং স্থান নিয়ন্ত্রণ করে।

1. flex-start

• ব্যবহার: উপাদানগুলো কন্টেইনারের উপরের অংশে (উল্লম্বভাবে শুরুতে) বিন্যস্ত হবে।

.flex-container {
  display: flex;
  align-items: flex-start; /* উপাদানগুলো উপরের দিকে সাজানো */
}

2. flex-end

• ব্যবহার: উপাদানগুলো কন্টেইনারের নিচের অংশে (উল্লম্বভাবে শেষে) বিন্যস্ত হবে।

.flex-container {
  display: flex;
  align-items: flex-end; /* উপাদানগুলো নিচে সাজানো */
}

3. center

• ব্যবহার: উপাদানগুলো কন্টেইনারের মাঝে উল্লম্বভাবে কেন্দ্রীভূত হবে।

.flex-container {
  display: flex;
  align-items: center; /* উপাদানগুলো কেন্দ্রে সাজানো */
}

4. stretch

• ব্যবহার: উপাদানগুলো কন্টেইনারের পুরো উচ্চতা দখল করবে এবং প্রসারিত হবে।

.flex-container {
  display: flex;
  align-items: stretch; /* উপাদানগুলো প্রসারিত হবে */
}

উদাহরণ সহ ব্যাখ্যা

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 (justify-content এবং align-items ব্যবহার):

.flex-container {
  display: flex;
  justify-content: space-between; /* অনুভূমিকভাবে সমান জায়গা */
  align-items: center; /* উল্লম্বভাবে কেন্দ্রীভূত */
  height: 200px; /* কন্টেইনারের উচ্চতা নির্ধারণ */
  background-color: lightgray;
}

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

আউটপুট:

• justify-content: space-between; — উপাদানগুলো অনুভূমিকভাবে সমানভাবে স্থান বিতরণ করবে এবং প্রথম এবং শেষ উপাদান কন্টেইনারের প্রান্তে থাকবে।
• align-items: center; — উপাদানগুলো কন্টেইনারের উল্লম্ব কেন্দ্রে অবস্থান করবে।

সারাংশ

• justify-content প্রপার্টি অনুভূমিক (horizontal) অক্ষে Flex Items-এর স্থান ও বিন্যাস নিয়ন্ত্রণ করে।
• align-items প্রপার্টি উল্লম্ব (vertical) অক্ষে Flex Items-এর স্থান ও বিন্যাস নিয়ন্ত্রণ করে।
• flex-start, flex-end, center, space-between, space-around, এবং stretch মানগুলো ব্যবহার করে আপনি Flex Items-এর অবস্থান এবং স্থান সহজে নিয়ন্ত্রণ করতে পারেন, যা ডিজাইনে আরও নমনীয়তা এবং আকর্ষণীয়তা আনে।

Flexbox ব্যবহার করে একাধিক লাইনে (multi-line) আইটেমগুলোকে সজ্জিত এবং তাদের মধ্যে গ্যাপ এবং অ্যালাইনমেন্ট নিয়ন্ত্রণ করা যায়। যখন Flex Items কন্টেইনারের মধ্যে এক লাইনে থাকতে পারে না, তখন তারা একাধিক লাইনে বিভক্ত হয়ে যায়। এই পরিস্থিতিতে, Flexbox আপনাকে আইটেমগুলোর মধ্যে ফাঁকা স্থান (gap) এবং তাদের সঠিকভাবে অ্যালাইন করার সুযোগ দেয়।

মাল্টি-লাইন আইটেমের মধ্যে গ্যাপ নিয়ন্ত্রণ

ফ্লেক্স কন্টেইনারে flex-wrap প্রপার্টি ব্যবহার করে একাধিক লাইনে আইটেমগুলিকে সাজানো যায়। এছাড়া, gap প্রপার্টি ব্যবহার করে আইটেমগুলোর মধ্যে ফাঁকা জায়গা নিয়ন্ত্রণ করা হয়।

flex-wrap প্রপার্টি:

• nowrap: ডিফল্ট মান, ফ্লেক্স আইটেমগুলো এক লাইনে থাকবে।
• wrap: ফ্লেক্স আইটেমগুলো একাধিক লাইনে সাজানো হবে।
• wrap-reverse: আইটেমগুলো উল্টানো অক্ষে (reverse direction) একাধিক লাইনে সাজানো হবে।

gap প্রপার্টি:

• gap: ফ্লেক্স আইটেমগুলোর মধ্যে গ্যাপ বা ফাঁকা স্থান নির্ধারণ করে। এটি আইটেমগুলোর মধ্যে অনুভূমিক এবং উল্লম্ব উভয় দিকেই ব্যবহৃত হয়।

মাল্টি-লাইন আইটেম এবং গ্যাপ নিয়ন্ত্রণের উদাহরণ

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 class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* আইটেমগুলো একাধিক লাইনে সাজানো হবে */
  gap: 20px; /* আইটেমগুলোর মধ্যে 20px ফাঁকা জায়গা থাকবে */
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  margin: 5px;
  text-align: center;
  flex: 1 1 200px; /* আইটেমগুলোকে সমান আকারে দেখাবে, 200px মিনিমাম সাইজ */
}

কী হবে:

• Flex Container-এ flex-wrap: wrap; ব্যবহৃত হওয়ার কারণে আইটেমগুলো একাধিক লাইনে সজ্জিত হবে।
• gap: 20px; ব্যবহৃত হওয়ায় আইটেমগুলোর মধ্যে ২০ পিক্সেল ফাঁকা জায়গা থাকবে।

মাল্টি-লাইন আইটেমের অ্যালাইনমেন্ট নিয়ন্ত্রণ

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

align-content প্রপার্টি:

• align-content মাল্টি-লাইনে সাজানো আইটেমগুলোর উল্লম্ব অ্যালাইনমেন্ট নিয়ন্ত্রণ করে। এটি কেবল তখনই কার্যকর, যখন Flex Container-এ একাধিক লাইন থাকে।
  • flex-start: উপরের দিকে।
  • flex-end: নিচের দিকে।
  • center: কেন্দ্রে।
  • space-between: লাইনগুলোর মধ্যে সমান দূরত্ব থাকবে।
  • space-around: লাইনের চারপাশে সমান প্যাডিং থাকবে।
  • stretch: আইটেমগুলো কন্টেইনারের উল্লম্ব আকারে প্রসারিত হবে।

align-items প্রপার্টি:

• align-items ফ্লেক্স কন্টেইনারের একক লাইনের আইটেমগুলোর উল্লম্ব অ্যালাইনমেন্ট নিয়ন্ত্রণ করে।

মাল্টি-লাইন আইটেম এবং অ্যালাইনমেন্ট নিয়ন্ত্রণের উদাহরণ

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 class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* আইটেমগুলো একাধিক লাইনে সাজানো হবে */
  gap: 15px; /* আইটেমগুলোর মধ্যে গ্যাপ */
  align-content: space-between; /* একাধিক লাইনের মধ্যে সমান দূরত্ব */
}

.flex-item {
  background-color: lightgreen;
  padding: 20px;
  flex: 1 1 200px; /* আইটেমগুলো সমানভাবে থাকবে */
  text-align: center;
}

কী হবে:

• Flex Items একাধিক লাইনে সাজানো হবে এবং gap প্রপার্টির মাধ্যমে আইটেমগুলোর মধ্যে ১৫px ফাঁকা জায়গা থাকবে।
• align-content: space-between; ব্যবহার করা হলে একাধিক লাইনের মধ্যে সমান দূরত্ব থাকবে।

মাল্টি-লাইন আইটেমের জন্য গুরুত্বপূর্ণ Flexbox প্রপার্টি

সারাংশ

ফ্লেক্সবক্সের flex-wrap প্রপার্টি ব্যবহার করে একাধিক লাইনে আইটেমগুলো সাজানো যায়। gap প্রপার্টির সাহায্যে আইটেমগুলোর মধ্যে ফাঁকা স্থান নিয়ন্ত্রণ করা হয় এবং align-items ও align-content প্রপার্টির মাধ্যমে মাল্টি-লাইন আইটেমগুলোর উল্লম্ব অ্যালাইনমেন্ট নিয়ন্ত্রণ করা সম্ভব। এই সব প্রপার্টি একত্রে ব্যবহার করে ফ্লেক্স কন্টেইনারে আইটেমগুলোর মধ্যে সুন্দরভাবে গ্যাপ এবং অ্যালাইনমেন্ট নির্ধারণ করা যায়।