এইচটিএমএল ডম স্টাইল ফ্লেক্সডাইরেকশন প্রপার্টি ফ্লেক্স এলিমেন্টের প্লেসমেন্টের দিকনির্দেশ সেট বা ফেরাতে ব্যবহৃত হয়।
−
-এর সিনট্যাক্স নিচে দেওয়া হলflexDirection বৈশিষ্ট্য সেট করা হচ্ছে -
object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"
উপরের বৈশিষ্ট্যগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -
| মান | বর্ণনা |
|---|---|
| সারি৷ | এটি ফ্লেক্স আইটেমগুলিকে অনুভূমিকভাবে সারি হিসাবে প্রদর্শন করে এবং এটি ডিফল্ট মান৷ |
| সারি-বিপরীত | এটি ফ্লেক্স আইটেমগুলিকে অনুভূমিকভাবে কিন্তু সারির বিপরীত ক্রমে প্রদর্শন করে৷ |
| কলাম৷ | ফ্লেক্স আইটেমগুলিকে একটি কলাম হিসাবে, উল্লম্বভাবে প্রদর্শন করে৷ |
| কলাম-বিপরীত৷ | এটি ফ্লেক্স আইটেমগুলিকে উল্লম্বভাবে কিন্তু কলামের বিপরীত ক্রমে প্রদর্শন করে৷ |
| প্রাথমিক৷ | এই প্রপার্টিটিকে প্রারম্ভিক মানের জন্য ফরসেট করা হচ্ছে। |
| উত্তরাধিকার৷ | অভিভাবক সম্পত্তি মান উত্তরাধিকারসূত্রে প্রাপ্ত করুন৷ |
আসুন flexDirection প্রপার্টি −
-এর একটি উদাহরণ দেখিউদাহরণ
<!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="The flex direction for the container div is changed to 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>Change the above container div flex direction by clicking the below button</p>
<button onclick="changeFlexDirection()">Change Flex Direction</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
“ফ্লেক্সের দিক পরিবর্তন করুন ক্লিক করলে ” বোতাম -
