Align Items (ক্রস অক্ষ বরাবর আইটেমের অবস্থান নির্ধারণ)

Align Items কী?

align-items হলো Flexbox-এর একটি প্রপার্টি যা ফ্লেক্স কন্টেইনারের ভিতরে থাকা Flex Items-এর উল্লম্ব অবস্থান নির্ধারণ করে। এটি ক্রস অক্ষ (cross axis) বরাবর Flex Items-এর বিন্যাস নিয়ন্ত্রণ করে, যেখানে ক্রস অক্ষ হলো Flexbox কন্টেইনারের অনুভূমিক দিকের বিপরীত অক্ষ।

যখন আপনি Flexbox ব্যবহার করেন, Flex Container-এ flex-direction অনুযায়ী প্রধান অক্ষ (main axis) নির্ধারিত হয় (যেমন, অনুভূমিক বা উল্লম্ব), আর ক্রস অক্ষ হলো এর বিপরীত অক্ষ। উদাহরণস্বরূপ:

• যদি flex-direction: row; হয়, তবে প্রধান অক্ষ হবে অনুভূমিক এবং ক্রস অক্ষ হবে উল্লম্ব।
• যদি flex-direction: column; হয়, তবে প্রধান অক্ষ হবে উল্লম্ব এবং ক্রস অক্ষ হবে অনুভূমিক।

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

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

এই মানে, Flex Items গুলো কন্টেইনারের উচ্চতা বা প্রস্থ অনুসারে স্ট্রেচ (stretch) হয়ে যায়। অর্থাৎ, Flex Items-এর উচ্চতা বা প্রস্থ কন্টেইনারের উচ্চতা বা প্রস্থের সাথে সমান হয়ে যায়।

.flex-container {
  display: flex;
  align-items: stretch; /* ফ্লেক্স আইটেমগুলো কন্টেইনারের উচ্চতায় স্ট্রেচ হবে */
}

2. flex-start:

ফ্লেক্স আইটেমগুলো কন্টেইনারের শীর্ষে (top) অবস্থান করবে।

.flex-container {
  display: flex;
  align-items: flex-start; /* ফ্লেক্স আইটেমগুলো উপরের দিকে বসবে */
}

3. flex-end:

ফ্লেক্স আইটেমগুলো কন্টেইনারের নিচে (bottom) অবস্থান করবে।

.flex-container {
  display: flex;
  align-items: flex-end; /* ফ্লেক্স আইটেমগুলো নিচের দিকে বসবে */
}

4. center:

ফ্লেক্স আইটেমগুলো কন্টেইনারের কেন্দ্র (center) বরাবর উল্লম্বভাবে অবস্থান করবে।

.flex-container {
  display: flex;
  align-items: center; /* ফ্লেক্স আইটেমগুলো কেন্দ্রে বসবে */
}

5. baseline:

ফ্লেক্স আইটেমগুলো তাদের বেসলাইন (baseline) অনুযায়ী সাজানো হবে, অর্থাৎ টেক্সটের বেসলাইন অনুযায়ী সেগুলো এক লাইনে অবস্থান করবে।

.flex-container {
  display: flex;
  align-items: baseline; /* ফ্লেক্স আইটেমগুলো বেসলাইন অনুযায়ী সাজানো হবে */
}

6. initial:

ডিফল্ট মান, যেটি stretch এর মতো আচরণ করে।

.flex-container {
  display: flex;
  align-items: initial; /* ডিফল্ট আচরণ হবে Stretch */
}

7. inherit:

এই মানটি পূর্ববর্তী উপাদান থেকে মান গ্রহণ করবে।

.flex-container {
  display: flex;
  align-items: inherit; /* পূর্ববর্তী উপাদান থেকে মান গ্রহণ করবে */
}

Align Items-এর ব্যবহার উদাহরণ

উদাহরণ 1: flex-start

<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;
  background-color: lightgray;
  align-items: flex-start; /* উপরের দিকে ফ্লেক্স আইটেমগুলো বসবে */
}

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

আউটপুট: Flex Items কন্টেইনারের শীর্ষে (top) সজ্জিত হবে।

উদাহরণ 2: center

<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;
  background-color: lightgray;
  align-items: center; /* কেন্দ্র বরাবর ফ্লেক্স আইটেমগুলো সজ্জিত হবে */
}

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

আউটপুট: Flex Items কন্টেইনারের উল্লম্বভাবে কেন্দ্রে সজ্জিত হবে।

উদাহরণ 3: baseline

<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;
  background-color: lightgray;
  align-items: baseline; /* বেসলাইন অনুযায়ী ফ্লেক্স আইটেমগুলো সজ্জিত হবে */
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  margin: 5px;
  font-size: 30px;
}

আউটপুট: Flex Items টেক্সটের বেসলাইন অনুযায়ী একত্রে সজ্জিত হবে।

Align Items ব্যবহার করার প্রয়োজনীয়তা:

• উল্লম্ব সেন্ট্রালাইজেশন: অনেক ক্ষেত্রে ওয়েব ডিজাইনে উপাদানগুলোকে উল্লম্বভাবে কেন্দ্রীভূত করতে হয়, যেমন, ফর্ম ফিল্ড, বাটন ইত্যাদি। align-items: center; এই কাজটি সহজ করে দেয়।
• টেক্সট বা উপাদান সমন্বয়: যখন টেক্সট বা অন্যান্য উপাদানগুলোর সঠিক আঙ্গিকে সাজানো প্রয়োজন, তখন baseline খুব কার্যকরী।
• ফ্লেক্স আইটেমগুলোর জায়গা বণ্টন: flex-start, flex-end, এবং stretch ব্যবহার করে Flex Items এর সঠিক সজ্জন, সমান জায়গা বণ্টন বা কন্টেইনারের প্রস্থ অনুযায়ী স্ট্রেচ করা যায়।

সারাংশ

align-items Flexbox-এর একটি শক্তিশালী প্রপার্টি যা Flex Items-এর ক্রস অক্ষ বরাবর অবস্থান নির্ধারণ করে। এটি ফ্লেক্স কন্টেইনারের ভিতরে থাকা আইটেমগুলোর সঠিক বিন্যাসে সহায়ক এবং এটি ওয়েব ডিজাইনে নিখুঁত সজ্জন এবং অবস্থান নিশ্চিত করে।

align-items কী?

align-items হলো Flexbox-এর একটি প্রপার্টি যা Flex Container-এর ভেতরে থাকা Flex Items-এর উল্লম্ব (vertical) বিন্যাস নিয়ন্ত্রণ করে। এটি নির্ধারণ করে যে, Flex Items কিভাবে Flex Container-এর উল্লম্ব অক্ষে (cross axis) সাজানো হবে। এর মাধ্যমে আপনি Flex Items-কে Flex Container-এর শীর্ষ, কেন্দ্র বা নিচে সোজা করতে পারেন।

align-items এর মানসমূহ

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

   • Flex Items গুলি Flex Container-এর উল্লম্ব আকার অনুযায়ী নিজস্ব উচ্চতা প্রসারিত করে। এটি ডিফল্ট মান, এবং যদি Flex Items-এর উচ্চতা নির্ধারিত না থাকে, তবে তারা কন্টেইনারের পুরো উচ্চতা দখল করবে।

   .flex-container {
     display: flex;
     align-items: stretch; /* Flex Items পুরো কন্টেইনারের উচ্চতা দখল করবে */
   }
   

2. flex-start:

   • Flex Items গুলি Flex Container-এর শীর্ষে সজ্জিত হবে।

   .flex-container {
     display: flex;
     align-items: flex-start; /* আইটেমগুলো শীর্ষে সজ্জিত হবে */
   }
   

3. flex-end:

   • Flex Items গুলি Flex Container-এর নিচে সজ্জিত হবে।

   .flex-container {
     display: flex;
     align-items: flex-end; /* আইটেমগুলো নিচে সজ্জিত হবে */
   }
   

4. center:

   • Flex Items গুলি Flex Container-এর উল্লম্ব অক্ষে সেন্টারে সজ্জিত হবে।

   .flex-container {
     display: flex;
     align-items: center; /* আইটেমগুলো উল্লম্বভাবে কেন্দ্রিত হবে */
   }
   

5. baseline:

   • Flex Items গুলি তাদের টেক্সটের বেসলাইন অনুযায়ী সজ্জিত হবে, অর্থাৎ আইটেমগুলো এমনভাবে সাজানো হবে যে, তাদের টেক্সটের বেসলাইন এক সারিতে আসবে।

   .flex-container {
     display: flex;
     align-items: baseline; /* টেক্সটের বেসলাইন অনুযায়ী সজ্জিত হবে */
   }
   

align-items প্রপার্টির ভূমিকা

1. Flex Items-এর উল্লম্ব বিন্যাস নিয়ন্ত্রণ:

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

2. নমনীয় লেআউট তৈরি:

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

3. Flex Items-এর একসাথে অবস্থান ঠিক করা:

একাধিক Flex Items-এর জন্য একযোগে উল্লম্ব বিন্যাস নিশ্চিত করা খুব সহজ। আপনি align-items প্রপার্টির মাধ্যমে সমস্ত Flex Items-এর জন্য একটি সাধারণ বিন্যাস নির্ধারণ করতে পারেন।

4. সুবিধাজনক এবং সুসংহত ডিজাইন:

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

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>

CSS (align-items: flex-start):

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

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

CSS (align-items: center):

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

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

CSS (align-items: flex-end):

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

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

CSS (align-items: baseline):

.flex-container {
  display: flex;
  align-items: baseline; /* টেক্সটের বেসলাইন অনুযায়ী সজ্জিত হবে */
}

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

সারাংশ

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

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

1. flex-start

• ব্যবহার:
  flex-start মানটি উপাদানগুলোকে তাদের কন্টেইনারের শুরুর দিকে (বাম অথবা উপরের দিক) স্থান দেয়। এটি ডিফল্ট মান, অর্থাৎ যখন কোন মান নির্দিষ্ট করা না হয়, তখন Flexbox এই মানটিকে স্বয়ংক্রিয়ভাবে প্রয়োগ করে।
• কীভাবে কাজ করে:
  • justify-content: flex-start;: উপাদানগুলো অনুভূমিকভাবে (row) বা উল্লম্বভাবে (column) কন্টেইনারের শুরুতে অবস্থান নেবে।
  • align-items: flex-start;: উপাদানগুলো কন্টেইনারের উপরের দিকে (যদি column ডিরেকশন হয়) বা বাম (যদি row ডিরেকশন হয়) অবস্থান নেবে।

উদাহরণ:

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

2. flex-end

• ব্যবহার:
  flex-end মানটি উপাদানগুলোকে কন্টেইনারের শেষের দিকে (ডান অথবা নিচের দিকে) স্থান দেয়।
• কীভাবে কাজ করে:
  • justify-content: flex-end;: উপাদানগুলো অনুভূমিকভাবে (row) বা উল্লম্বভাবে (column) কন্টেইনারের শেষের দিকে স্থান পাবে।
  • align-items: flex-end;: উপাদানগুলো কন্টেইনারের নিচের দিকে (যদি column ডিরেকশন হয়) বা ডান (যদি row ডিরেকশন হয়) অবস্থান নেবে।

উদাহরণ:

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

3. center

• ব্যবহার:
  center মানটি উপাদানগুলোকে কন্টেইনারের কেন্দ্রস্থলে অনুভূমিক ও উল্লম্বভাবে সমানভাবে সেন্ট্রালাইজ করে।
• কীভাবে কাজ করে:
  • justify-content: center;: উপাদানগুলো অনুভূমিকভাবে কন্টেইনারের কেন্দ্রে অবস্থান নেবে।
  • align-items: center;: উপাদানগুলো উল্লম্বভাবে কন্টেইনারের কেন্দ্রে অবস্থান নেবে।

উদাহরণ:

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

4. baseline

• ব্যবহার:
  baseline মানটি Flex Items-এর বেসলাইন অনুযায়ী বিন্যস্ত হয়, যা মূলত তাদের টেক্সটের মূল লাইনের উপর ভিত্তি করে। এই মানটি সাধারণত টেক্সট এবং লোগো ইত্যাদির সঠিক অবস্থান নির্ধারণের জন্য ব্যবহৃত হয়।
• কীভাবে কাজ করে:
  • align-items: baseline;: Flex Items-এর টেক্সটের বেসলাইন অনুসারে উল্লম্বভাবে তাদের অবস্থান নির্ধারণ করা হবে।

উদাহরণ:

.flex-container {
  display: flex;
  align-items: baseline; /* টেক্সটের বেসলাইন অনুযায়ী উল্লম্বভাবে বিন্যস্ত */
}

5. stretch

• ব্যবহার:
  stretch মানটি Flex Items-এর উচ্চতা বা প্রস্থকে কন্টেইনারের উচ্চতা বা প্রস্থ অনুযায়ী প্রসারিত করে। এটি Flexbox-এর ডিফল্ট মান, এবং এটি শুধুমাত্র তখন কাজ করে যখন align-items বা align-self প্রপার্টি ব্যবহার করা হয়।
• কীভাবে কাজ করে:
  • justify-content: stretch;: সাধারণত justify-content-এর জন্য stretch মান ব্যবহার হয় না, কারণ এটি শুধুমাত্র কন্টেইনারের সমতল বিন্যাসে প্রভাব ফেলে না।
  • align-items: stretch;: Flex Items-এর উচ্চতা কন্টেইনারের উচ্চতার সাথে সমান হয়ে যাবে। এটি ডিফল্ট আচরণ, অর্থাৎ যদি align-items নির্দিষ্ট না করা হয়, তাহলে Flex Items-এর উচ্চতা কন্টেইনারের উচ্চতার সাথে প্রসারিত হবে।

উদাহরণ:

.flex-container {
  display: flex;
  align-items: stretch; /* Flex Items গুলি কন্টেইনারের উচ্চতা অনুযায়ী প্রসারিত হবে */
}

সারাংশ

• flex-start: উপাদানগুলোকে কন্টেইনারের শুরুর দিকে স্থান দেয়।
• flex-end: উপাদানগুলোকে কন্টেইনারের শেষের দিকে স্থান দেয়।
• center: উপাদানগুলোকে কন্টেইনারের কেন্দ্রে সেন্ট্রালাইজ করে।
• baseline: উপাদানগুলোকে টেক্সটের বেসলাইন অনুসারে বিন্যস্ত করে।
• stretch: উপাদানগুলোকে কন্টেইনারের উচ্চতা বা প্রস্থ অনুযায়ী প্রসারিত করে।

এই মানগুলো Flexbox লেআউট ব্যবস্থাপনাকে আরও নমনীয় এবং কাস্টমাইজেবল করে তোলে, যেখানে আপনি উপাদানগুলোর অবস্থান এবং বিন্যাস খুব সহজেই নিয়ন্ত্রণ করতে পারেন।

Flexbox-এ Vertical অক্ষ বরাবর (অর্থাৎ উল্লম্বভাবে) আইটেমগুলোর অবস্থান নিয়ন্ত্রণ করা খুবই সহজ এবং এটি align-items এবং align-self প্রপার্টি ব্যবহার করে করা হয়। Flexbox ব্যবহারের মাধ্যমে আপনি একাধিক উপাদানকে সঠিকভাবে উল্লম্বভাবে বিন্যস্ত করতে পারেন।

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

align-items প্রপার্টি Flex Container-এর সব Flex Items-এর উল্লম্ব অবস্থান নিয়ন্ত্রণ করে। এটি Flex Items-এর উল্লম্ব অক্ষ বরাবর (Vertical axis) কীভাবে সাজানো হবে তা নির্ধারণ করে।

align-items এর মান:

1. flex-start
   Flex Items গুলি কন্টেইনারের উপরের অংশে সাজানো হয়।

   .flex-container {
     display: flex;
     align-items: flex-start; /* উপরের দিকে অবস্থান */
   }
   

2. flex-end
   Flex Items গুলি কন্টেইনারের নিচের অংশে সাজানো হয়।

   .flex-container {
     display: flex;
     align-items: flex-end; /* নিচের দিকে অবস্থান */
   }
   

3. center
   Flex Items গুলি কন্টেইনারের কেন্দ্রভাগে উল্লম্বভাবে অবস্থান নেয়।

   .flex-container {
     display: flex;
     align-items: center; /* কেন্দ্রে অবস্থান */
   }
   

4. stretch (ডিফল্ট)
   Flex Items গুলি কন্টেইনারের উচ্চতা অনুযায়ী প্রসারিত হয়ে পুরো উচ্চতা দখল করে।

   .flex-container {
     display: flex;
     align-items: stretch; /* কন্টেইনারের উচ্চতা অনুসারে প্রসারিত হবে */
   }
   

5. baseline
   Flex Items গুলি তাদের টেক্সট বেসলাইনের সাথে সজ্জিত হয়। এটি সাধারণত টেক্সট এবং অন্যান্য উপাদানগুলোর সঠিক অবস্থান নিশ্চিত করতে ব্যবহার হয়।

   .flex-container {
     display: flex;
     align-items: baseline; /* বেসলাইন অনুযায়ী অবস্থান */
   }
   

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

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

উদাহরণ:

1. align-self: flex-start নির্দিষ্ট Flex Item কন্টেইনারের উপরের অংশে অবস্থান নেবে।

   .flex-item {
     align-self: flex-start; /* নির্দিষ্ট আইটেম উপরে থাকবে */
   }
   

2. align-self: flex-end নির্দিষ্ট Flex Item কন্টেইনারের নিচের অংশে অবস্থান নেবে।

   .flex-item {
     align-self: flex-end; /* নির্দিষ্ট আইটেম নিচে থাকবে */
   }
   

3. align-self: center নির্দিষ্ট Flex Item কন্টেইনারের উল্লম্বভাবে কেন্দ্রে অবস্থান নেবে।

   .flex-item {
     align-self: center; /* নির্দিষ্ট আইটেম কেন্দ্রে থাকবে */
   }
   

4. align-self: stretch নির্দিষ্ট Flex Item কন্টেইনারের উচ্চতা অনুসারে প্রসারিত হবে।

   .flex-item {
     align-self: stretch; /* নির্দিষ্ট আইটেম প্রসারিত হবে */
   }
   

উদাহরণ: Vertical Alignment

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; /* কন্টেইনারের উচ্চতা */
  border: 2px solid #ccc;
  background-color: lightgray;
}

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

.flex-container.align-start {
  align-items: flex-start; /* উপরের দিকে অবস্থান */
}

.flex-container.align-center {
  align-items: center; /* কেন্দ্রে অবস্থান */
}

.flex-container.align-end {
  align-items: flex-end; /* নিচে অবস্থান */
}

আউটপুট:

1. flex-start: সব আইটেম উপরে থাকবে।
2. center: সব আইটেম কন্টেইনারের কেন্দ্রভাগে থাকবে।
3. flex-end: সব আইটেম নিচে থাকবে।

সারাংশ

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