HTML DOM Style flexDirection প্রপার্টি

HTML DOM Style flexDirection প্রপার্টি ফ্লেক্স এলিমেন্টগুলির সাজানোর দিক নির্দিষ্ট করতে বা ফেরত দেওয়ার জন্য ব্যবহৃত হয়।

সিনট্যাক্স

flexDirection প্রপার্টি সেট করার জন্য:

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

প্রপার্টি মানগুলি

মান	বিবরণ
row	ফ্লেক্স আইটেম들을 অনুভূমিকভাবে সারি আকারে প্রদর্শন করে। এটি ডিফল্ট মান।
row-reverse	ফ্লেক্স আইটেম들을 অনুভূমিকভাবে প্রদর্শন করে কিন্তু সারির বিপরীত ক্রমে।
column	ফ্লেক্স আইটেম들을 খাড়া কলাম আকারে প্রদর্শন করে।
column-reverse	ফ্লেক্স আইটেম들을 খাড়া প্রদর্শন করে কিন্তু কলামের বিপরীত ক্রমে।
initial	প্রপার্টিকে ডিফল্ট মানে সেট করে।
inherit	প্যারেন্ট এলিমেন্ট থেকে প্রপার্টির মান উত্তরাধিকারসূত্রে পায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
  #demo {
    box-shadow: 0 0 0 3px #a323c3;
    display: flex;
    flex-direction: column-reverse;
  }
  #demo div {
    margin: auto;
    border: thin solid green;
  }
</style>
<script>
  function changeFlexDirection() {
    document.getElementById("demo").style.flexDirection = "row-reverse";
    document.getElementById("Sample").innerHTML = "কন্টেইনার ডিভের ফ্লেক্স ডাইরেকশন row-reverse এ পরিবর্তন করা হয়েছে";
  }
</script>
</head>
<body>
  <div id="demo">
    <div>1 <img src="https://www.tutorialspoint.com/images/3d.png"></div>
    <div>2 <img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
    <div>3 <img src="https://www.tutorialspoint.com/images/css.png"></div>
    <div>4 <img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
  </div>
  <p>নিচের বাটনে ক্লিক করে উপরের কন্টেইনার ডিভের ফ্লেক্স ডাইরেকশন পরিবর্তন করুন</p>
  <button onclick="changeFlexDirection()">ফ্লেক্স ডাইরেকশন পরিবর্তন করুন</button>
  <p id="Sample"></p>
</body>
</html>

আউটপুট

প্রাথমিক অবস্থায় ফ্লেক্স আইটেমগুলি খাড়া কলামে বিপরীত ক্রমে দেখানো হবে।

"ফ্লেক্স ডাইরেকশন পরিবর্তন করুন" বাটনে ক্লিক করার পর ফ্লেক্স আইটেমগুলি অনুভূমিকভাবে বিপরীত ক্রমে সজ্জিত হবে।