place-content বৈশিষ্ট্য

place-content বৈশিষ্ট্যটি ফ্লেক্স এলিমেন্টগুলির জন্য প্রধান এবং ক্রস অক্ষ বরাবর, এবং গ্রিডের জন্য অনুভূমিক এবং উল্লম্ব অক্ষ বরাবর এলিমেন্টগুলির সমন্বয় নির্ধারণ করে। প্রথম মানটি দ্বারা প্রধান (অনুভূমিক) অক্ষ বরাবর সমন্বয় নির্দেশিত হয়, দ্বিতীয় মানটি দ্বারা - ক্রস (উল্লম্ব) অক্ষ বরাবর। বৈশিষ্ট্যটি প্রয়োগ করা হয় প্যারেন্ট এলিমেন্টে।

সিনট্যাক্স

সিলেক্টর {
	place-content: প্রধান_অক্ষ ক্রস_অক্ষ;
}

উদাহরণ . প্রধান অক্ষের শুরু এবং ক্রস অক্ষের কেন্দ্র বরাবর সমন্বয়

এখন এলিমেন্টগুলি প্রধান অক্ষের উপরের অংশে চাপা পড়েছে এবং একই সাথে ক্রস অক্ষের কেন্দ্রে অবস্থিত:

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

#parent {
	display: flex;
	place-content: start 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: flex;
	place-content: center end;
	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: flex;
	place-content: end start;
	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;
	place-content: start 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;
}

উদাহরণ . গ্রিডে উল্লম্ব অক্ষের কেন্দ্র এবং অনুভূমিক অক্ষের শুরু বরাবর সমন্বয়

আসুন আমাদের এলিমেন্টগুলিকে উল্লম্ব অক্ষের কেন্দ্র এবং অনুভূমিক অক্ষের শুরু বরাবর সমন্বয় করি:

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

#parent {
	display: grid;
	place-content: center 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;
	place-content: end 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;
}

আরও দেখুন

align-content বৈশিষ্ট্য,
যা ক্রস বা উল্লম্ব অক্ষ বরাবর সমন্বয় নির্ধারণ করে
justify-content বৈশিষ্ট্য,
যা প্রধান অক্ষ বরাবর সমন্বয় নির্ধারণ করে