কম্পিউটার

একটি ফ্লেক্স আইটেম CSS এর সাথে বাকি ফ্লেক্স আইটেমগুলির তুলনায় কতটা বৃদ্ধি পাবে তা সেট করুন


ফ্লেক্স-গ্রো প্রপার্টি ব্যবহার করে একটি ফ্লেক্স আইটেমের আকার বাড়ান। এটি এক বা একাধিক ফ্লেক্স আইটেমের সাথে ব্যবহার করুন৷

উদাহরণ

আপনি ফ্লেক্স-গ্রো সম্পত্তি বাস্তবায়ন করতে নিম্নলিখিত কোড চালানোর চেষ্টা করতে পারেন। এখানে Q3 ফ্লেক্স-আইটেমটি অন্যান্য আইটেমের চেয়ে বড় -

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            align-content: space-between;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div style = "flex-grow: 1">Q1</div>
         <div style = "flex-grow: 1">Q2</div>
         <div style = "flex-grow: 20">Q3</div>
         <div style = "flex-grow: 1">Q4</div>
         <div style = "flex-grow: 1">Q5</div>
      </div>
   </body>
</html>

  1. সিএসএস দিয়ে কন্টেইনারের শুরুতে ফ্লেক্স আইটেমগুলি সারিবদ্ধ করুন

  2. CSS দিয়ে অনুভূমিকভাবে ফ্লেক্স আইটেম সেট করুন

  3. CSS সহ গ্রিড আইটেমগুলিতে নাম সেট করুন

  4. CSS দিয়ে কন্টেইনারের কেন্দ্রে ফ্লেক্স আইটেমগুলি সারিবদ্ধ করুন