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

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

সিনট্যাক্স

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

মানসমূহ

মান	বর্ণনা
`flex-start`	ব্লকগুলো ক্রস অক্ষের (উল্লম্ব) শুরুতে চেপে থাকে।
`flex-end`	ব্লকগুলো ক্রস অক্ষের (উল্লম্ব) শেষে চেপে থাকে।
`center`	ব্লকগুলো ক্রস অক্ষের (উল্লম্ব) কেন্দ্রে অবস্থান করে।
`baseline`	এলিমেন্টগুলো তাদের বেসলাইন অনুযায়ী সাজানো হয়। বেসলাইন হল একটি কাল্পনিক রেখা যা অক্ষরের নীচের প্রান্ত বরাবর চলে, নিচের দিকে প্রসারিত অংশগুলি (যেমন `'p'` এবং `'y'` অক্ষরে) বিবেচনা না করে।
`stretch`	ব্লকগুলো প্রসারিত হয়, ক্রস অক্ষ বরাবর সমস্ত উপলব্ধ স্থান দখল করে, তবে `min-width` এবং `max-width` নির্ধারণ করা থাকলে সেগুলো বিবেচনা করা হয়। এলিমেন্টের জন্য প্রস্থ এবং উচ্চতা নির্ধারণ করা থাকলে - `stretch` উপেক্ষা করা হবে।

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

উদাহরণ . stretch মান

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

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

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

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

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

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

#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 মান এলিমেন্টের আকার ছাড়া

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

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

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

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

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

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

#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 মান + এলিমেন্টের আকার

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

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

#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 মান + এলিমেন্টের আকার

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

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

#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 প্রপার্টি নির্ধারণ করা হয়েছে:

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

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

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

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

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	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;
	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;
}

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

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

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

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

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

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

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

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

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

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

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

আরও দেখুন

flex-direction প্রপার্টি,
যা ফ্লেক্স ব্লকগুলোর অক্ষের দিক নির্ধারণ করে
justify-content প্রপার্টি,
যা মূল অক্ষ বরাবর সাজানো নিয়ন্ত্রণ করে
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 এর জন্য সংক্ষেপণ