HTML DOM শৈলী flexFlow বৈশিষ্ট্য একটি উপাদানের flexDirection এবং flexWrap বৈশিষ্ট্য নির্দিষ্ট করতে ব্যবহৃত হয়। এটি flexDirection এবং flexWrap এর জন্য একটি সংক্ষিপ্ত বিবরণ এবং একই ক্রমে মান গ্রহণ করে।
−
-এর সিনট্যাক্স নিচে দেওয়া হলফ্লেক্সফ্লো প্রপার্টি সেট করা হচ্ছে -
object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
উপরের বৈশিষ্ট্যগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -
| মান | বিবরণ |
|---|---|
| ফ্লেক্স-দিক | Itis নমনীয় আইটেম দিক নির্দেশ করার জন্য ব্যবহৃত হয় এবং এর মানগুলি হল সারি, সারি-বিপরীত, কলাম, কলাম-বিপরীত, প্রাথমিক এবং উত্তরাধিকার৷ এর ডিফল্ট মান হল সারি৷ |
| ফ্লেক্স-র্যাপ | এটি নমনীয় আইটেমগুলি মোড়ানো উচিত কিনা তা নির্দিষ্ট করার জন্য ব্যবহৃত হয়৷ এর মান হল Nowrap,wrap, wrap-reverse, initial, and inherit. এর ডিফল্ট মান isnowrap. |
| প্রাথমিক | এই প্রপার্টিটি প্রারম্ভিক মান সেট করার জন্য। |
| উত্তরাধিকার | পিতামাতার সম্পত্তির মান উত্তরাধিকার সূত্রে পেতে |
আসুন flexFlow প্রপার্টি −
-এর জন্য একটি উদাহরণ দেখিউদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 600px;
height: 190px;
border:1px solid black;
display: flex;
flex-flow: row-reverse no-wrap;
}
#demo div {
width:100px;
height:100px;
}
</style>
<script>
function changeFlexFlow() {
document.getElementById("demo").style.flexFlow="row wrap";
document.getElementById("Sample").innerHTML="The flex flow property is now set to row wrap";
}
</script>
</head>
<body>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/css.png"></div>
<div>1</div>
<div><img src="https://www.tutorialspoint.com/images/Swift.png"></div>
<div>2</div>
<div><img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
<div>3</div>
<div><img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
<div>4</div>
<div><img src="https://www.tutorialspoint.com/images/3d.png"></div>
<div>5</div>
</div>
<p>Change the above container div flex flow property by clicking the below button</p>
<button onclick="changeFlexFlow()">Change Flex Flow</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
“চেঞ্জ ফ্লেক্স ফ্লো ক্লিক করলে ” বোতাম -
