কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে ফ্লেক্সIBLE আইটেম-wrap সেট করা

জাভাস্ক্রিপ্টে ফ্লেক্সIBLE আইটেম-wrap হবে কিনা তা সেট করতে flexWrap প্রপার্টিটি ব্যবহার করুন।

উদাহরণ

নিচের কোডটি চালিয়ে জাভাস্ক্রিপ্টে flexWrap প্রপার্টির ব্যবহার শিখুন:

<!DOCTYPE html> <html>    <head>       <style>          #box {             border: 1px solid #000000;             width: 120px;             height: 150px;             display: flex;             flex-wrap: wrap;          }          #box div {             height: 50px;             width: 50px;          }       </style>    </head>    <body>       <div id = "box">          <div style = "background-color:orange;">DIV1</div>          <div style = "background-color:blue;">DIV2</div>          <div style = "background-color:yellow;" id = "myID">DIV3</div>       </div>       <p>flexWrap প্রপার্টি ব্যবহার করে</p>       <button onclick = "display()">সেট করুন</button>       <script>          function display() {             document.getElementById("box").style.flexWrap = "nowrap";          }       </script>    </body> </html>

সম্ভাব্য মান: nowrap (ডিফল্ট, এক লাইনে থাকবে), wrap (বহু লাইনে ভাঙবে), wrap-reverse (উল্টো ক্রমে wrap)। উদাহরণে প্রাথমিক wrap, বোতাম ক্লিক করলে nowrap হয়ে যায় — ফলে তিনটি DIV এক লাইনে ফিট হওয়ার চেষ্টা করবে (ওভারফ্লো হলে ছোট হয়ে যাবে)।

  1. জাভাস্ক্রিপ্টে একটি এলিমেন্টের চারদিকের আউটলাইন শৈলী সেট করা

  2. CSS-এ বর্ডারের স্টাইল (border-style) সেট করা

  3. জাভাস্ক্রিপ্টে innerHTML সেট করুন

  4. CSS flex-wrap প্রোপার্টি দিয়ে ফ্লেক্স আইটেম র‍্যাপ নিয়ন্ত্রণ করুন