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

flex-flow বৈশিষ্ট্য হল একটি সংক্ষিপ্ত রূপ flex-direction এবং flex-wrap এর জন্য। ডিফল্ট মান: row nowrap। ফ্লেক্স ব্লকগুলির জন্য প্যারেন্ট এলিমেন্টে প্রয়োগ করা হয়।

সিনট্যাক্স

সিলেক্টর {
	flex-flow: প্রধান_অক্ষের_দিক বহু-লাইন;
}

মানের ক্রম গুরুত্বপূর্ণ নয়।

উদাহরণ

এই উদাহরণে, ব্লকগুলি তাদের কন্টেইনারে ফিট হয় না এবং একাধিক লাইনে সাজানো হবে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

উদাহরণ

প্রধান অক্ষের দিক পরিবর্তন করা যাক (column row এর পরিবর্তে):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	flex-flow: column wrap;
	justify-content: space-between;
	display: flex;
	height: 200px;
	width: 330px;
	margin: auto;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

আরও দেখুন

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