CSS align-self প্রোপার্টি দিয়ে একক ফ্লেক্স আইটেম এলাইন করুন

align-self প্রোপার্টি একটি নির্দিষ্ট ফ্লেক্স আইটেমের ক্রস-অক্ষ沿vido এলাইনমেন্ট ওভাররাইড করতে দেয়। এটি কন্টেইনারের align-items প্রোপার্টিকে বাতিল করে দেয়।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        height: 300px; 
        background-color: orange; 
      } 
      .mycontainer > div { 
        background-color: white; 
        text-align: center; 
        line-height: 90px; 
        font-size: 40px; 
        width: 100px; 
        margin: 50px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Quiz</h1> 
    <div class="mycontainer"> 
      <div>Q1</div> 
      <div>Q2</div> 
      <div>Q3</div> 
      <div style="align-self: center">Q4</div> 
      <div>Q5</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: কন্টেইনারের ডিফল্ট align-items: stretch থাকায় সব আইটেম উপরে নিচে ফ্যেলে যাবে। কিন্তু Q4-তে align-self: center দেওয়ায় সেটি লম্ব açıতে 가운데 অ্যালাইন হয়েছে।