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

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

সিনট্যাক্স

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

মানসমূহ

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

ডিফল্ট মান: flex-start।

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

বর্তমানে অক্ষটি বাম থেকে ডানে নির্দেশিত (এটি করে flex-direction: row), এবং ব্লকগুলো বাম দিকে চেপে আছে:

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

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

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

এই উদাহরণে অক্ষটিও বাম থেকে ডানে নির্দেশিত, কিন্তু ব্লকগুলো ডান দিকে চেপে আছে, কারণ justify-content-এ মান flex-end দেওয়া হয়েছে:

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

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	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>4</div>
	<div>5</div>
</div>

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

উদাহরণ . space-between মান

ব্লকগুলো প্রধান অক্ষ বরাবর বণ্টিত, এ ক্ষেত্রে প্রথম এলিমেন্ট অক্ষের শুরুতে এবং শেষ এলিমেন্ট অক্ষের শেষে চেপে আছে:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

উদাহরণ . space-around মান

ব্লকগুলো প্রধান অক্ষ বরাবর বণ্টিত, এ ক্ষেত্রে প্রথম ব্লক এবং অক্ষের শুরু, শেষ ব্লক এবং অক্ষের শেষে একই ফাঁকা স্থান, যেটা বাকি ব্লকগুলোর মধ্যকার ফাঁকা স্থানের সমান। যাইহোক, ফাঁকা স্থান যোগ হয় এবং দুইটি ব্লকের মধ্যকার দূরত্ব একটি ব্লক এবং অক্ষের শুরু/শেষের মধ্যকার দূরত্বের দ্বিগুণ:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

উদাহরণ . center মান. অক্ষ নিচের দিকে

প্রধান অক্ষের দিক পরিবর্তন করি, flex-direction-এ মান column দিয়ে:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

উদাহরণ . space-between মান. অক্ষ নিচের দিকে

বর্তমানে ব্লকগুলো উল্লম্বভাবে সমানভাবে বণ্টিত হবে:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	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>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 প্রপার্টি,
যা ফ্লেক্স ব্লকগুলোর অক্ষের দিক নির্ধারণ করে
align-items প্রপার্টি,
যা ক্রস অক্ষ বরাবর এলাইনমেন্ট নির্ধারণ করে
flex-wrap প্রপার্টি,
যা ফ্লেক্স ব্লকগুলোর মাল্টিলাইন ক্ষমতা নির্ধারণ করে
flex-flow প্রপার্টি,
flex-direction এবং flex-wrap-এর জন্য সংক্ষেপণ
order প্রপার্টি,
যা ফ্লেক্স ব্লকগুলোর ক্রম নির্ধারণ করে
align-self প্রপার্টি,
যা একটি ব্লকের এলাইনমেন্ট নির্ধারণ করে
flex-basis প্রপার্টি,
যা একটি নির্দিষ্ট ফ্লেক্স ব্লকের সাইজ নির্ধারণ করে
flex-grow প্রপার্টি,
যা ফ্লেক্স ব্লকগুলোর প্রসারণযোগ্যতা নির্ধারণ করে
flex-shrink প্রপার্টি,
যা ফ্লেক্স ব্লকগুলোর সঙ্কোচনযোগ্যতা নির্ধারণ করে
flex প্রপার্টি,
flex-grow, flex-shrink এবং flex-basis-এর জন্য সংক্ষেপণ