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

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

সিনট্যাক্স

cssসিলেক্টর {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

মানসমূহ

উদাহরণ . flex-start মান

এই উদাহরণে, যে অক্ষ বরাবর এলাইনমেন্ট করা হচ্ছে তা উপরে থেকে নীচের দিকে নির্দেশিত, অর্থাৎ এটি ক্রস অক্ষ। প্রাপ্ত ফলাফল থেকে দেখা যায়, আমাদের সমস্ত এলিমেন্ট এর উপরের অংশে চাপা পড়েছে:

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

css#parent {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . flex-end মান

এই উদাহরণে ব্লকগুলি ক্রস অক্ষের নীচের দিকে চাপা পড়েছে, কারণ align-content প্রপার্টি flex-end মানে সেট করা হয়েছে:

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

css#parent {
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
  height: 200px;
  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>

css#parent {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

গ্রিডে উল্লম্ব অক্ষের শুরু বরাবর এলাইনমেন্ট

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

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

css#parent {
  display: grid;
  align-content: 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>

css#parent {
  display: grid;
  align-content: 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>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  align-content: 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;
}

Результат:

আরও দেখুন