CSS order প্রোপার্টি

order প্রোপার্টি ফ্লেক্স আইটেমগুলোর প্রদর্শনের ক্রম নির্ধারণ করে। কম মান আগে দেখাবে। HTML-এর ক্রম বদলায় না।

উদাহরণ

নিচের কোডটি চালিয়ে CSS order প্রোপার্টির ব্যবহার দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        background-color: orange; 
        align-content: space-between; 
        height: 150px; 
        width: 600px; 
        flex-wrap: wrap; 
      } 
      .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="order: 8">Q1</div> 
      <div style="order: 6">Q2</div> 
      <div style="order: 2">Q3</div> 
      <div style="order: 1">Q4</div> 
      <div style="order: 7">Q5</div> 
      <div style="order: 4">Q6</div> 
      <div style="order: 3">Q7</div> 
      <div style="order: 5">Q8</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: HTML-তে Q1, Q2, Q3... ক্রমে থাকা সত্ত্বেও order প্রোপার্টি দিয়ে সেগুলো Q4 (১), Q7 (২), Q3 (৩), Q6 (৪), Q8 (৫), Q5 (৬), Q2 (৭), Q1 (৮) ক্রমে দেখানো হয়েছে। ডিফল্ট order: 0। ঋণাত্মক মানও ব্যবহার করা যায়।