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

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

সিনট্যাক্স

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

মানসমূহ

মান	বর্ণনা
`flex-start`	ব্লকগুলি ক্রস (উল্লম্ব) অক্ষের শুরুতে চাপা পড়ে।
`flex-end`	ব্লকগুলি ক্রস (উল্লম্ব) অক্ষের শেষে চাপা পড়ে।
`center`	ব্লকগুলি ক্রস (উল্লম্ব) অক্ষের কেন্দ্রে অবস্থান করে।
`space-between`	ব্লকগুলি ক্রস (উল্লম্ব) অক্ষ বরাবর বিতরণ করা হয়, এক্ষেত্রে প্রথম এলিমেন্ট অক্ষের শুরুতে চাপা পড়ে, এবং শেষ এলিমেন্ট - শেষে।
`space-around`	ব্লকগুলি ক্রস (উল্লম্ব) অক্ষ বরাবর বিতরণ করা হয়, এক্ষেত্রে প্রথম ব্লক এবং অক্ষের শুরুতে, শেষ ব্লক এবং অক্ষের শেষে একই ফাঁকা স্থান থাকে, অন্যান্য ব্লকগুলির মধ্যবর্তী স্থানের মতো। যাইহোক, তারা সমান নয়, যেমনটা মনে হতে পারে: ফাঁকা স্থানগুলি সংযোজিত হয় এবং দুটি ব্লকের মধ্যে দূরত্ব ব্লক এবং অক্ষের শুরু/শেষের মধ্যবর্তী দূরত্বের চেয়ে দ্বিগুণ বেশি।

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

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

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

#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 মানে সেট করা হয়েছে:

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

#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 মান

এখন ব্লকগুলি ক্রস অক্ষের কেন্দ্র বরাবর সারিবদ্ধ:

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

#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;
}

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

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

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

#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;
}

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

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

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

#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;
}

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

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

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

#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;
}

আরও দেখুন

flex-direction প্রপার্টি,
যা ফ্লেক্স ব্লকের অক্ষের দিক নির্ধারণ করে
justify-content প্রপার্টি,
যা মেইন অক্ষ বরাবর এলাইনমেন্ট নির্ধারণ করে
align-items প্রপার্টি,
যা ক্রস অক্ষ বরাবর এলাইনমেন্ট নির্ধারণ করে
flex-wrap প্রপার্টি,
যা ফ্লেক্স ব্লকের মাল্টি-লাইন বৈশিষ্ট্য নির্ধারণ করে
flex-flow প্রপার্টি,
flex-direction এবং flex-wrap এর জন্য সংক্ষিপ্ত রূপ
order প্রপার্টি,
যা ফ্লেক্স ব্লকের ক্রম নির্ধারণ করে
align-self প্রপার্টি,
যা একটি ব্লকের এলাইনমেন্ট নির্ধারণ করে
place-content প্রপার্টি,
যা মেইন এবং ক্রস অক্ষ বরাবর এলাইনমেন্ট নির্ধারণ করে