HTML DOM Style flexWrap প্রপার্টি ফ্লেক্স এলিমেন্টের ভিতরে এলিমেন্টগুলো কীভাবে র্যাপ হবে তা নির্দিষ্ট করতে ব্যবহৃত হয়।
সিনট্যাক্স
flexWrap প্রপার্টি সেট করার সিনট্যাক্স:
object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| nowrap | এটি ডিফল্ট মান যা নির্দেশ করে যে ফ্লেক্সIBLE আইটেমগুলো র্যাপ হবে না। |
| wrap | প্রয়োজনে ফ্লেক্সIBLE আইটেমগুলো র্যাপ হবে। |
| wrap-reverse | প্রয়োজনে ফ্লেক্সIBLE আইটেমগুলো র্যাপ হবে কিন্তু রিভার্স অর্ডারে। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #demo { margin: auto; width: 180px; height: 120px; box-shadow: 0 0 0 5px brown; display: flex; flex-wrap: wrap; } #demo div { padding: 0; width: 50px; height: 50px; border: 5px solid; border-radius: 15%; } #demo div:nth-child(even) { border-color: black; } #demo div:nth-child(odd) { border-color: red; } </style> <script> function changeFlexWrap() { document.getElementById("demo").style.flexWrap="nowrap"; document.getElementById("Sample").innerHTML="কন্টেইনার div-এর ফ্লেক্স র্যাপ প্রপার্টি no-wrap-এ সেট করা হয়েছে"; } </script> </head> <body> <div id="demo"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <p>নিচের বাটনে ক্লিক করলে উপরের কন্টেইনার ফ্লেক্স র্যাপ প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeFlexWrap()">ফ্লেক্স র্যাপ পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
ফ্লেক্স র্যাপ পরিবর্তন করুন বাটনে ক্লিক করলে:
