Align Self (ফ্লেক্স আইটেমের নিজস্ব অবস্থান নির্ধারণ)

Align Self কী?

align-self প্রপার্টি Flexbox-এর একটি শক্তিশালী বৈশিষ্ট্য, যা Flex Items-এর নিজস্ব অবস্থান (alignment) নির্ধারণ করে। এটি align-items প্রপার্টি থেকে আলাদা, কারণ align-items Flex Container-এর সমস্ত Flex Items-এর জন্য একযোগভাবে কাজ করে, কিন্তু align-self ব্যবহার করে আপনি একক Flex Item-এর অবস্থান আলাদাভাবে নিয়ন্ত্রণ করতে পারেন। এর মাধ্যমে আপনি কন্টেইনারের সাধারণ alignment সেটিংসকে ওভাররাইড (override) করে Flex Items-এর ব্যক্তিগত অবস্থান নির্ধারণ করতে পারেন।

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

align-self প্রপার্টির মান Flex Items-এর উল্লম্ব (vertical) অবস্থান বা alignment নিয়ন্ত্রণ করে। এর মানসমূহ হলো:

1. auto (ডিফল্ট):
   এটি align-items এর সেটিং অনুসরণ করে। অর্থাৎ, align-self: auto; মান ব্যবহার করলে Flex Item কন্টেইনারের align-items প্রপার্টির সেটিং অনুযায়ী অবস্থান করবে।
2. flex-start:
   Flex Item কন্টেইনারের শীর্ষে (top) অবস্থান করবে।
3. flex-end:
   Flex Item কন্টেইনারের নিচে (bottom) অবস্থান করবে।
4. center:
   Flex Item কন্টেইনারের মাঝখানে (vertically centered) অবস্থান করবে।
5. baseline:
   Flex Item কন্টেইনারের বেসলাইন অনুযায়ী অবস্থান করবে, অর্থাৎ Flex Item এর টেক্সট বা কন্টেন্টের বেসলাইনকে কন্টেইনারের বেসলাইনের সাথে সঠিকভাবে মিলানো হবে।
6. stretch:
   Flex Item কন্টেইনারের উচ্চতা বা প্রস্থ অনুযায়ী স্ট্রেচ হবে (ডিফল্ট যখন align-items: stretch; থাকে)।

Align Self এর ব্যবহার এবং উদাহরণ

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;
  height: 200px;
  background-color: lightgray;
  align-items: center; /* সমস্ত Flex Items কে কেন্দ্রে রেখেছে */
}

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

/* শুধুমাত্র Item 2-র অবস্থান পরিবর্তন করতে align-self ব্যবহার */
.flex-item:nth-child(2) {
  align-self: flex-start; /* Item 2 শীর্ষে থাকবে */
}

আউটপুট:

• Item 1 এবং Item 3 Flex Container-এর কেন্দ্রে থাকবে, কারণ align-items: center; প্রপার্টি তাদের জন্য প্রযোজ্য।
• Item 2 শীর্ষে (top) অবস্থান করবে, কারণ এখানে align-self: flex-start; ব্যবহৃত হয়েছে, যা কেবল Item 2 এর জন্য প্রযোজ্য।

Align Self এর আরো উদাহরণ

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>

CSS উদাহরণ:

.flex-container {
  display: flex;
  height: 200px;
  background-color: lightgray;
  align-items: stretch; /* ডিফল্টভাবে সমস্ত আইটেম কন্টেইনারের উচ্চতা অনুযায়ী স্ট্রেচ হবে */
}

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

/* Item 2 এবং Item 3 এর অবস্থান নির্দিষ্টভাবে পরিবর্তন করা */
.flex-item:nth-child(2) {
  align-self: flex-end; /* Item 2 নিচে থাকবে */
}

.flex-item:nth-child(3) {
  align-self: center; /* Item 3 কেন্দ্রে থাকবে */
}

আউটপুট:

• Item 1 এবং Item 4 align-items: stretch; প্রপার্টি অনুসরণ করে কন্টেইনারের পূর্ণ উচ্চতা দখল করবে।
• Item 2 নিচে (bottom) থাকবে, কারণ এখানে align-self: flex-end; ব্যবহার করা হয়েছে।
• Item 3 কেন্দ্রে থাকবে, কারণ এখানে align-self: center; ব্যবহৃত হয়েছে।

Align Self ব্যবহার করার সুবিধা:

• প্রতিটি Flex Item-এর জন্য পৃথক অবস্থান নির্ধারণ: align-self Flexbox-এ খুবই গুরুত্বপূর্ণ কারণ এটি Flex Items-কে কন্টেইনারের অন্যান্য আইটেমের থেকে আলাদাভাবে অবস্থান নির্ধারণ করার সুযোগ দেয়। আপনি একক আইটেমের alignment পরিবর্তন করতে পারেন, যা অন্যান্য আইটেমের alignment পরিবর্তন না করে সহজেই করা যায়।
• লেআউট নিয়ন্ত্রণ: এটি Flex Items-এর অবস্থান আরও নির্ভুলভাবে নিয়ন্ত্রণ করতে সাহায্য করে, বিশেষত যখন কিছু আইটেম অন্যদের থেকে আলাদা হওয়া প্রয়োজন।

সারাংশ:

• align-self একটি Flex Item এর নিজস্ব উল্লম্ব অবস্থান বা alignment নির্ধারণ করে।
• এটি align-items প্রপার্টি থেকে আলাদা, কারণ align-items Flex Container-এর সমস্ত Flex Items-এর জন্য একযোগভাবে কাজ করে, কিন্তু align-self Flex Items-এর ব্যক্তিগত অবস্থান নিয়ন্ত্রণ করে।
• বিভিন্ন মান যেমন flex-start, flex-end, center, baseline, এবং stretch এর মাধ্যমে আপনি Flex Items এর অবস্থান সুনির্দিষ্টভাবে নিয়ন্ত্রণ করতে পারবেন।

align-self কী?

align-self একটি Flexbox প্রপার্টি যা Flex Items-এর উল্লম্ব (vertical) অক্ষের বিন্যাস নিয়ন্ত্রণ করে। এটি align-items প্রপার্টি থেকে আলাদা, কারণ align-self Flex Container-এর কোনো নির্দিষ্ট Flex Item-এর অবস্থান নির্ধারণ করে, যেখানে align-items পুরো Flex Container-এর আইটেমগুলোর বিন্যাস নিয়ন্ত্রণ করে।

অর্থাৎ, align-self ব্যবহার করে আপনি একটি নির্দিষ্ট Flex Item-এর উল্লম্ব বিন্যাস পরিবর্তন করতে পারেন, যা Flex Container-এর align-items প্রপার্টি দ্বারা নির্ধারিত সাধারণ আচরণকে ওভাররাইড (override) করে।

align-self এর প্রপার্টি মানসমূহ:

1. auto (ডিফল্ট মান):

   • auto মানটি Flex Item-এর জন্য align-items প্রপার্টি অনুযায়ী আচরণ করে। যদি align-items এ কোনো মান সেট না করা থাকে, তবে auto ডিফল্ট হিসাবে ব্যবহৃত হয়।
   • ব্যবহার: এটি প্রাথমিক অবস্থায় কোনো পরিবর্তন করে না এবং অন্যান্য প্রপার্টির উপর নির্ভর করে।

   .flex-item {
     align-self: auto;
   }
   

2. flex-start:

   • Flex Item কে Flex Container-এর শীর্ষে (উপরের দিকে) সাজায়।
   • ব্যবহার: এটি সাধারণত উপরের অংশে সঠিকভাবে আইটেমগুলো সাজাতে ব্যবহৃত হয়।

   .flex-item {
     align-self: flex-start;
   }
   

3. flex-end:

   • Flex Item কে Flex Container-এর নিচে (নিচের দিকে) সাজায়।
   • ব্যবহার: এটি সাধারণত নিচের অংশে সঠিকভাবে আইটেমগুলো সাজাতে ব্যবহৃত হয়।

   .flex-item {
     align-self: flex-end;
   }
   

4. center:

   • Flex Item কে Flex Container-এর উল্লম্বভাবে কেন্দ্রভূত (center) করে।
   • ব্যবহার: এটি একে অপরের মধ্যে সমান দূরত্বে আইটেমগুলো সাজানোর জন্য ব্যবহৃত হয়।

   .flex-item {
     align-self: center;
   }
   

5. baseline:

   • Flex Item কে Flex Container-এর বেসলাইন অনুযায়ী সাজায়, যা সাধারণত টেক্সট বা লেখার জন্য ব্যবহৃত হয়।
   • ব্যবহার: এটি টেক্সট বা অন্যান্য লেখা উপাদানগুলোর জন্য উপযুক্ত যেখানে আইটেমগুলো তাদের বেসলাইনের উপর সোজা রাখা দরকার।

   .flex-item {
     align-self: baseline;
   }
   

6. stretch:

   • Flex Item এর উচ্চতা Flex Container-এর উচ্চতার সাথে সমান হবে। এটি ডিফল্ট আচরণ হিসেবে কাজ করে যদি অন্য কোনো মান দেওয়া না থাকে।
   • ব্যবহার: এটি সাধারণত আইটেমের উচ্চতাকে Stretch করার জন্য ব্যবহৃত হয়।

   .flex-item {
     align-self: stretch;
   }
   

align-self এর ব্যবহার উদাহরণসহ

উদাহরণ: Align Self এর মাধ্যমে আইটেমের উল্লম্ব বিন্যাস নিয়ন্ত্রণ

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

.flex-container {
  display: flex;
  height: 200px; /* কন্টেইনারের উচ্চতা */
  justify-content: space-between; /* আইটেমগুলোর মধ্যে জায়গা সমানভাবে ভাগ করা */
  background-color: lightgray;
}

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

.flex-item:nth-child(1) {
  align-self: flex-start; /* প্রথম আইটেম শীর্ষে সাজানো হবে */
}

.flex-item:nth-child(2) {
  align-self: center; /* দ্বিতীয় আইটেম কেন্দ্রভূত হবে */
}

.flex-item:nth-child(3) {
  align-self: flex-end; /* তৃতীয় আইটেম নিচে সাজানো হবে */
}

আউটপুট:
এখানে:

• প্রথম আইটেমটি Flex Container-এর শীর্ষে সাজানো হবে।
• দ্বিতীয় আইটেমটি Flex Container-এর উল্লম্বভাবে কেন্দ্রে সজ্জিত হবে।
• তৃতীয় আইটেমটি Flex Container-এর নিচে সাজানো হবে।

align-self এর সুবিধা এবং প্রয়োজনীয়তা

1. নির্দিষ্ট Flex Items-এর নিয়ন্ত্রণ:
   align-self প্রপার্টির মাধ্যমে আপনি Flex Items-এর জন্য Flex Container-এর সাধারণ align-items প্রপার্টি সেটিংসকে ওভাররাইড করে নির্দিষ্ট বিন্যাস কাস্টমাইজ করতে পারেন।
2. রেস্পন্সিভ ডিজাইন:
   Flex Items-এর বিন্যাস পরিবর্তন করা যায়, যা রেস্পন্সিভ ওয়েব ডিজাইনে সহায়ক। বিভিন্ন স্ক্রীনে উপাদানগুলোর অবস্থান পরিবর্তন করতে align-self খুবই কার্যকর।
3. নমনীয়তা এবং কাস্টমাইজেশন:
   এটি Flex Items এর জন্য আরো বেশি নমনীয়তা এবং কাস্টমাইজেশন প্রদান করে, কারণ আপনি প্রতিটি আইটেমের অবস্থান আলাদাভাবে নিয়ন্ত্রণ করতে পারেন।
4. টেক্সট বা লেখার মধ্যে সঠিক বিন্যাস:
   align-self: baseline; প্রপার্টি টেক্সট বা লেখার জন্য খুবই উপকারী, কারণ এটি টেক্সটের বেসলাইন অনুযায়ী আইটেমগুলোকে সাজাতে সাহায্য করে।

সারাংশ

align-self Flexbox-এর একটি অত্যন্ত শক্তিশালী প্রপার্টি যা Flex Items-এর উল্লম্ব বিন্যাস নিয়ন্ত্রণ করে। এটি align-items প্রপার্টির মধ্যে যে কোনো নির্দিষ্ট আইটেমের অবস্থান পরিবর্তন করতে সাহায্য করে। align-self প্রপার্টি ব্যবহার করে আপনি আপনার Flex Items এর বিন্যাসে আরও নমনীয়তা, কাস্টমাইজেশন এবং সঠিক অবস্থান নির্ধারণ করতে পারেন, যা ওয়েব ডিজাইনকে আরও কার্যকর এবং সুশৃঙ্খল করে তোলে।

Flexbox লেআউট সিস্টেমে Flex Items-এর অবস্থান নির্ধারণে অনেক গুরুত্বপূর্ণ প্রপার্টি ব্যবহৃত হয়। তবে কখনো কখনো Flex Items-এর প্রতিটির অবস্থান আলাদাভাবে নির্ধারণ করতে হয়। এজন্য align-self প্রপার্টি ব্যবহার করা হয়, যা একক Flex Item-এর জন্য vertical alignment (উল্লম্ব অক্ষে অবস্থান) নির্ধারণ করে।

এছাড়া, Flexbox-এর মাধ্যমে Flex Items গুলোকে অনুভূমিকভাবে (horizontal) কিভাবে সাজানো হবে তা justify-content প্রপার্টি দ্বারা নিয়ন্ত্রণ করা হয়।

Individual Flex Items এর Alignment কনফিগারেশন:

1. Align-self (উল্লম্ব অক্ষে অবস্থান)

align-self প্রপার্টি Flex Items-এর জন্য বিশেষভাবে ব্যবহার হয় যখন আপনি Flex Items-এর অবস্থান Flex Container-এর align-items প্রপার্টির থেকে আলাদা করতে চান। এটি শুধুমাত্র একক Flex Item-এর জন্য কাজ করে এবং সেই আইটেমটি কন্টেইনারের উল্লম্ব অক্ষে সঠিকভাবে বিন্যস্ত করে।

Align-self-এর মানসমূহ:

1. auto (ডিফল্ট):
   • Flex Item কন্টেইনারের align-items প্রপার্টির মান অনুসরণ করে।
2. flex-start:
   • Flex Item কন্টেইনারের শীর্ষে (উপরে) অবস্থান করবে।
3. flex-end:
   • Flex Item কন্টেইনারের তলায় (নিচে) অবস্থান করবে।
4. center:
   • Flex Item কন্টেইনারের উল্লম্বভাবে কেন্দ্রে অবস্থান করবে।
5. baseline:
   • Flex Item তার বেসলাইন (লাইন যেখানে লেখা শুরু হয়) অনুযায়ী কন্টেইনারের অন্যান্য আইটেমের সাথে সারিবদ্ধ হবে।
6. stretch (ডিফল্ট):
   • Flex Item তার উচ্চতা কন্টেইনারের উচ্চতা অনুযায়ী প্রসারিত হবে (যদি কন্টেইনারের উচ্চতা নির্দিষ্ট থাকে)।

উদাহরণ:

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item special">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
  height: 200px;
  background-color: lightgray;
  align-items: flex-start; /* কন্টেইনারের আইটেমগুলো উপরের দিকে সাজানো */
}

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

.special {
  align-self: center; /* এই আইটেমটি কন্টেইনারের কেন্দ্রবিন্দুতে থাকবে */
}

আউটপুট:

• Item 1 এবং Item 3 কন্টেইনারের শীর্ষে (উপরে) অবস্থান করবে (যেহেতু align-items: flex-start; ব্যবহার করা হয়েছে), কিন্তু Item 2 কন্টেইনারের কেন্দ্রে অবস্থান করবে (যেহেতু align-self: center; ব্যবহার করা হয়েছে)।

2. Justify-content (অনুভূমিক অক্ষে অবস্থান)

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

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

1. flex-start:
   • Flex Items গুলি কন্টেইনারের শুরুতে (বামে) থাকবে।
2. flex-end:
   • Flex Items গুলি কন্টেইনারের শেষের দিকে (ডানে) থাকবে।
3. center:
   • Flex Items গুলি কন্টেইনারের কেন্দ্রে থাকবে।
4. space-between:
   • Flex Items গুলোর মধ্যে সমান দূরত্ব থাকবে, কিন্তু প্রথম এবং শেষ আইটেম কন্টেইনারের শুরু এবং শেষের দিকে থাকবে।
5. space-around:
   • Flex Items গুলোর মধ্যে সমান স্থান থাকবে, তবে প্রথম এবং শেষ আইটেমের চারপাশে অর্ধেক জায়গা থাকবে।
6. space-evenly:
   • Flex 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>

CSS:

.flex-container {
  display: flex;
  justify-content: space-between; /* আইটেমগুলোর মধ্যে সমান দূরত্ব থাকবে */
}

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

আউটপুট:

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

Align-items এবং Align-self মধ্যে পার্থক্য

• align-items: এটি Flex Container-এর জন্য কাজ করে এবং সমস্ত Flex Items-এর জন্য একটি সাধারণ অ্যালাইনমেন্ট কনফিগারেশন সরবরাহ করে।
• align-self: এটি একক Flex Item-এর জন্য কাজ করে এবং সেটি কন্টেইনারের সাধারণ align-items প্রপার্টির মান থেকে ভিন্নভাবে অবস্থান নির্ধারণ করতে সাহায্য করে।

সারাংশ

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

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

এগুলি সাধারণত align-items বা align-self প্রপার্টির অংশ হিসেবে ব্যবহৃত হয়, যা Flex Items-এর উল্লম্ব (vertical) অক্ষের বিন্যাস নিয়ন্ত্রণ করে।

1. flex-start:

• ব্যাখ্যা: Flex Items গুলো Flex Container-এর শীর্ষে (উপরের দিকে) সজ্জিত হয়।
• ব্যবহার: এটি সাধারণত Flex Items-এর উল্লম্ব অক্ষে উপরের দিকে বিন্যস্ত করতে ব্যবহৃত হয়।

.flex-container {
  display: flex;
  align-items: flex-start;  /* Flex Items শীর্ষে সজ্জিত হবে */
}

উদাহরণ:

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

.flex-container {
  display: flex;
  align-items: flex-start;  /* শীর্ষে সজ্জিত হবে */
  height: 200px;
  border: 1px solid #ccc;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
}

2. flex-end:

• ব্যাখ্যা: Flex Items গুলো Flex Container-এর নিচের দিকে (ডানে) সজ্জিত হয়।
• ব্যবহার: এটি Flex Items-এর উল্লম্ব অক্ষে নিচের দিকে সজ্জিত করতে ব্যবহৃত হয়।

.flex-container {
  display: flex;
  align-items: flex-end;  /* Flex Items নিচে সজ্জিত হবে */
}

উদাহরণ:

.flex-container {
  display: flex;
  align-items: flex-end;  /* নিচে সজ্জিত হবে */
  height: 200px;
  border: 1px solid #ccc;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
}

3. center:

• ব্যাখ্যা: Flex Items গুলো Flex Container-এর মাঝখানে (কেন্দ্রে) সজ্জিত হয়।
• ব্যবহার: এটি Flex Items-কে উল্লম্বভাবে (vertical) এবং অনুভূমিকভাবে (horizontal) কেন্দ্রিত করার জন্য ব্যবহৃত হয়।

.flex-container {
  display: flex;
  align-items: center;  /* Flex Items কেন্দ্রে সজ্জিত হবে */
}

উদাহরণ:

.flex-container {
  display: flex;
  align-items: center;  /* কেন্দ্রে সজ্জিত হবে */
  height: 200px;
  border: 1px solid #ccc;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
}

4. baseline:

• ব্যাখ্যা: Flex Items গুলো তাদের বেসলাইন (baseline) অনুযায়ী সজ্জিত হয়। বেসলাইন হলো টেক্সটের রেখা, যা সাধারণত সব থেকে নিচের অংশ থেকে শুরু হয়।
• ব্যবহার: যখন Flex Items-এর মধ্যে কিছু আইটেমে টেক্সট থাকে, তখন baseline ব্যবহার করে তাদের টেক্সটকে একটি রেখায় সাজানো যায়।

.flex-container {
  display: flex;
  align-items: baseline;  /* Flex Items-এর টেক্সট বেসলাইনে সজ্জিত হবে */
}

উদাহরণ:

.flex-container {
  display: flex;
  align-items: baseline;  /* বেসলাইনে সজ্জিত হবে */
  height: 200px;
  border: 1px solid #ccc;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  font-size: 24px;
}

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

• ব্যাখ্যা: Flex Items গুলো Flex Container-এর পূর্ণ উচ্চতা বা প্রস্থ অনুযায়ী প্রসারিত হয়।
• ব্যবহার: এটি Flex Items-কে কন্টেইনারের পূর্ণ উচ্চতা বা প্রস্থে প্রসারিত করতে ব্যবহৃত হয়। এটি ডিফল্ট মান, যা যখন align-items বা align-self দেওয়া না হয়, তখন Flex Items স্বয়ংক্রিয়ভাবে পূর্ণ জায়গা নেবে।

.flex-container {
  display: flex;
  align-items: stretch;  /* Flex Items প্রসারিত হবে */
}

উদাহরণ:

.flex-container {
  display: flex;
  align-items: stretch;  /* প্রসারিত হবে */
  height: 200px;
  border: 1px solid #ccc;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
}

সারাংশ

• flex-start: Flex Items কন্টেইনারের শীর্ষে সজ্জিত হবে।
• flex-end: Flex Items কন্টেইনারের নিচে সজ্জিত হবে।
• center: Flex Items কন্টেইনারের মধ্যে কেন্দ্রীভূত হবে।
• baseline: Flex Items টেক্সটের বেসলাইনে সজ্জিত হবে।
• stretch: Flex Items কন্টেইনারের পূর্ণ উচ্চতা বা প্রস্থে প্রসারিত হবে।

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