বৈশিষ্ট্য align-self

বৈশিষ্ট্য align-self আলাদাভাবে নেওয়া ফ্লেক্স-ব্লকের জন্য ক্রস অক্ষ বরাবর এবং গ্রিডে আলাদা উপাদানের জন্য উল্লম্ব অক্ষ বরাবর সমাধান নির্ধারণ করে। মূলত এই বৈশিষ্ট্যটি align-items বৈশিষ্ট্যের প্রতিনিধিত্ব করে, কিন্তু একটি নির্দিষ্ট ব্লকের জন্য।

সিনট্যাক্স

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

মানগুলি

মান	বর্ণনা
`flex-start`	ব্লকটি ক্রস অক্ষের শুরুতে চাপা থাকে।
`flex-end`	ব্লকটি ক্রস অক্ষের শেষে চাপা থাকে।
`center`	ব্লকটি ক্রস অক্ষের কেন্দ্রে অবস্থান করে।
`baseline`	ব্লকটি তার বেসলাইন অনুযায়ী সারিবদ্ধ হয়। বেসলাইন হল একটি কাল্পনিক রেখা, যা অক্ষরগুলির নীচের প্রান্ত বরাবর চলে, ঝুলন্ত অংশগুলি বিবেচনা না করে, উদাহরণস্বরূপ, যেমন 'p', 'q', 'y', 'g' অক্ষরগুলিতে হয়।
`stretch`	ব্লকটি প্রসারিত হয়, ক্রস অক্ষ বরাবর সমস্ত উপলব্ধ স্থান দখল করে, তবে `min-width` এবং `max-width` এখনও বিবেচনা করা হয়, যদি সেগুলি নির্ধারিত থাকে। যদি উপাদানের জন্য প্রস্থ এবং উচ্চতা নির্ধারিত থাকে - `stretch` উপেক্ষা করা হবে।
`auto`	ব্লকটি সেইভাবে সারিবদ্ধ হবে, যেমন `align-items` বৈশিষ্ট্যে নির্ধারণ করা হয়েছে।

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

উদাহরণ . stretch মান

এই উদাহরণে, সমস্ত ব্লকে flex-start মান নির্ধারণ করা হয়েছে (align-items বৈশিষ্ট্য), এবং তৃতীয় ব্লকের জন্য - align-self stretch মানে:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: stretch;
}

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

এই উদাহরণে, সমস্ত ব্লকের জন্য align-items বৈশিষ্ট্যের জন্য flex-start মান নির্ধারণ করা হয়েছে, এবং তৃতীয় ব্লকের জন্য - align-self flex-end মানে:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: flex-end;
}

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

আসুন প্রথম উপাদানের জন্য উল্লম্ব অক্ষের শুরুতে সমাধান নির্ধারণ করি:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: start;
}

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

আসুন প্রথম উপাদানের উল্লম্ব অক্ষের কেন্দ্রে সমাধান নির্ধারণ করি:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: center;
}

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

আসুন আমাদের গ্রিডের প্রথম উপাদানের জন্য উল্লম্ব অক্ষের শেষে সমাধান নির্ধারণ করি:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: end;
}

আরও দেখুন

বৈশিষ্ট্য flex-direction,
যা ফ্লেক্স ব্লকের অক্ষের দিক নির্ধারণ করে
বৈশিষ্ট্য justify-content,
যা প্রধান অক্ষ বরাবর সমাধান নির্ধারণ করে
বৈশিষ্ট্য align-items,
যা ক্রস অক্ষ বরাবর সমাধান নির্ধারণ করে
বৈশিষ্ট্য flex-wrap,
যা ফ্লেক্স ব্লকের মাল্টিলাইন ক্ষমতা নির্ধারণ করে
বৈশিষ্ট্য flex-flow,
flex-direction এবং flex-wrap এর জন্য সংক্ষেপণ
বৈশিষ্ট্য order,
যা ফ্লেক্স ব্লকের ক্রম নির্ধারণ করে
বৈশিষ্ট্য flex-basis,
যা একটি নির্দিষ্ট ফ্লেক্স ব্লকের আকার নির্ধারণ করে
বৈশিষ্ট্য flex-grow,
যা ফ্লেক্স ব্লকের লোভ নির্ধারণ করে
বৈশিষ্ট্য flex-shrink,
যা ফ্লেক্স ব্লকের সংকোচন ক্ষমতা নির্ধারণ করে
বৈশিষ্ট্য flex,
flex-grow, flex-shrink এবং flex-basis এর জন্য সংক্ষেপণ