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

align-items প্রপার্টিটি ফ্লেক্স ব্লকগুলোর জন্য ক্রস অক্ষ বরাবর এবং গ্রিডের জন্য উল্লম্ব অক্ষ বরাবর এলিমেন্টগুলোর সাজানো নিয়ন্ত্রণ করে। এটি প্যারেন্ট এলিমেন্টে প্রয়োগ করা হয়।

সিনট্যাক্স

cssসিলেক্টর {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

মানসমূহ

ডিফল্ট মান: stretch।

উদাহরণ . stretch মান

বর্তমানে মূল অক্ষ বাম থেকে ডানে directed, এবং ক্রস অক্ষ বরাবর এলিমেন্টগুলো পুরো উচ্চতা জুড়ে প্রসারিত:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

উদাহরণ . stretch মান + এলিমেন্টের আকার

বর্তমানে এলিমেন্টগুলোর জন্য প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়েছে, সেজন্য align-items প্রপার্টির stretch মানটি উপেক্ষা করা হবে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . flex-start মান এলিমেন্টের আকার ছাড়া

বর্তমানে এলিমেন্টগুলো উপরের দিকে চেপে যাবে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  border: 1px solid #696989;
}

Результат:

উদাহরণ . flex-start মান + এলিমেন্টের আকার

বর্তমানে এলিমেন্টগুলো এখনও উপরের দিকে চেপে থাকবে, তবে তাদের একটি নির্ধারিত প্রস্থ এবং উচ্চতা থাকবে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . flex-end মান + এলিমেন্টের আকার

বর্তমানে এলিমেন্টগুলো নীচের দিকে চেপে যাবে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . center মান + এলিমেন্টের আকার

বর্তমানে এলিমেন্টগুলো ক্রস অক্ষ বরাবর কেন্দ্রে অবস্থান করবে (এই ক্ষেত্রে উল্লম্বভাবে):

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . center মান, বিভিন্ন আকারের এলিমেন্ট

বর্তমানে এলিমেন্টগুলোর উচ্চতা অনুযায়ী বিভিন্ন আকার রয়েছে (এগুলি টেক্সট দ্বারা প্রসারিত হচ্ছে, কিন্তু height ও নির্ধারণ করা যেতে পারে), সবার প্রস্থ একই, কারণ width প্রপার্টি নির্ধারণ করা হয়েছে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . baseline মান, বিভিন্ন আকারের এলিমেন্ট

আর এভাবে বেসলাইন অনুযায়ী সাজানো দেখায়:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 130px;
  line-height: 1;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . গ্রিডে উল্লম্ব অক্ষের শুরুতে সাজানো

আসুন আমাদের এলিমেন্টগুলোকে সেলের ভিতরে উল্লম্ব অক্ষের শুরুতে সাজাই:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

এবং এখন ব্রাউজার ডিবাগারে আমাদের গ্রিডটি দেখি:

উদাহরণ . গ্রিডে উল্লম্ব অক্ষের কেন্দ্রে সাজানো

এবং এখন আমাদের এলিমেন্টগুলোকে সেলগুলোর মধ্যে উল্লম্ব অক্ষের কেন্দ্রে সাজাই:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: center;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

আসুন ডিবাগারে গ্রিডের প্রদর্শন দেখি:

উদাহরণ . গ্রিডে উল্লম্ব অক্ষের শেষে সাজানো

আবার এলিমেন্টগুলোর সাজানো পরিবর্তন করি, এইবার উল্লম্ব অক্ষের শেষে:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  
}

Результат:

এবং এখন দেখি কিভাবে আমাদের গ্রিডটি ডিবাগারের মাধ্যমে দেখায়:

আরও দেখুন