CSS order প্রোপার্টি দিয়ে ফ্লেক্স আইটেমের ক্রম পরিবর্তন করুন

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

উদাহরণ

নিচের কোডটি চালিয়ে 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।