বৈশিষ্ট্য flex-direction

বৈশিষ্ট্য flex-direction প্রধান এবং ক্রস অক্ষের দিক নির্ধারণ করে অথবা, অন্য কথায় বললে, উপাদানগুলিকে একটি সারি বা কলামে সাজায়।

ফ্লেক্স ব্লকের প্যারেন্ট উপাদানের জন্য প্রয়োগ করা হয়। সংক্ষিপ্ত বৈশিষ্ট্য flex-flow-এর অংশ।

সিনট্যাক্স

সিলেক্টর {
	flex-direction: row | row-reverse | column | column-reverse;
}

মানসমূহ

মান	বর্ণনা
`row`	প্রধান অক্ষ বাম থেকে ডানে নির্দেশিত। উপাদানগুলি একটি সারিতে সাজানো থাকে, ডিফল্টরূপে বাম প্রান্তে লাগানো থাকে, তাদের সংখ্যায়ন সাধারণ ক্রম অনুসরণ করে - বাম থেকে ডানে।
`row-reverse`	প্রধান অক্ষ ডান থেকে বামে নির্দেশিত। উপাদানগুলি একটি সারিতে সাজানো থাকে, ডিফল্টরূপে ডান প্রান্তে লাগানো থাকে, তাদের সংখ্যায়ন বিপরীত ক্রম অনুসরণ করে - ডান থেকে বামে।
`column`	প্রধান অক্ষ উপর থেকে নীচে নির্দেশিত। উপাদানগুলি একটি কলামে সাজানো থাকে, ডিফল্টরূপে শীর্ষে লাগানো থাকে, তাদের সংখ্যায়ন সাধারণ ক্রম অনুসরণ করে - উপর থেকে নীচে।
`column-reverse`	প্রধান অক্ষ নীচ থেকে উপরে নির্দেশিত। উপাদানগুলি একটি কলামে সাজানো থাকে, ডিফল্টরূপে নীচে লাগানো থাকে, তাদের সংখ্যায়ন বিপরীত ক্রম অনুসরণ করে - নীচ থেকে উপরে।

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

উদাহরণ

উপাদানগুলি একটি সারিতে সাজানো থাকে, ডিফল্টরূপে বাম প্রান্তে লাগানো থাকে, তাদের সংখ্যায়ন সাধারণ ক্রম অনুসরণ করে - বাম থেকে ডানে:

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

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

উদাহরণ . row-reverse মান

উপাদানগুলি একটি সারিতে সাজানো থাকে, ডিফল্টরূপে ডান প্রান্তে লাগানো থাকে, তাদের সংখ্যায়ন বিপরীত ক্রম অনুসরণ করে - ডান থেকে বামে:

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

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

উদাহরণ . column মান

উপাদানগুলি একটি কলামে সাজানো থাকে, ডিফল্টরূপে শীর্ষে লাগানো থাকে, তাদের সংখ্যায়ন সাধারণ ক্রম অনুসরণ করে - উপর থেকে নীচে:

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

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

উদাহরণ . column-reverse মান

উপাদানগুলি একটি কলামে সাজানো থাকে, ডিফল্টরূপে নীচে লাগানো থাকে, তাদের সংখ্যায়ন বিপরীত ক্রম অনুসরণ করে - নীচ থেকে উপরে:

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

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

আরও দেখুন

বৈশিষ্ট্য 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-এর জন্য সংক্ষেপণ