HTML DOM Style flexFlow প্রপার্টি একটি এলিমেন্টের flexDirection এবং flexWrap প্রপার্টি নির্দিষ্ট করতে ব্যবহৃত হয়। এটি flexDirection এবং flexWrap এর শর্টহ্যান্ড এবং একই অর্ডারে মান গ্রহণ করে।
সিনট্যাক্স
flexFlow প্রপার্টি সেট করার সিনট্যাক্স:
object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| flex-direction | ফ্লেক্সIBLE আইটেমের দিক নির্দিষ্ট করতে ব্যবহৃত হয় এবং এর মানগুলো row, row-reverse, column, column-reverse, initial এবং inherit। এর ডিফল্ট মান row। |
| flex-wrap | ফ্লেক্সIBLE আইটেমগুলো র্যাপ হবে কিনা তা নির্দিষ্ট করতে ব্যবহৃত হয়। এর মানগুলো nowrap, wrap, wrap-reverse, initial, এবং inherit। এর ডিফল্ট মান nowrap। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা প্রপার্টি মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!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="ফ্লেক্স ফ্লো প্রপার্টি এখন 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>নিচের বাটনে ক্লিক করলে উপরের কন্টেইনার div-এর ফ্লেক্স ফ্লো প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeFlexFlow()">ফ্লেক্স ফ্লো পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
ফ্লেক্স ফ্লো পরিবর্তন করুন বাটনে ক্লিক করলে:
