HTML DOM Style flex প্রপার্টি display: flex সেট করা এলিমেন্টের জন্য নমনীয় দৈর্ঘ্য সেট বা রিটার্ন করতে ব্যবহৃত হয়। এটি flexGrow, flexShrink এবং flexBasis প্রপার্টিগুলো ম্যানিপুলেট করতে সাহায্য করে।
সিনট্যাক্স
flex প্রপার্টি সেট করার জন্য:
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
প্রপার্টি মানগুলি
| মান | বিবরণ |
|---|---|
| flex-grow | অন্য ফ্লেক্সIBLE আইটেমের সাপেক্ষে আইটেমটি কতটুকু বড় হবে তা নির্দিষ্ট করে। |
| flex-shrink | অন্য ফ্লেক্সIBLE আইটেমের সাপেক্ষে আইটেমটি কতটুকু ছোট হবে তা নির্দিষ্ট করে। |
| flex-basis | আইটেমের দৈর্ঘ্য নির্দিষ্ট করে এবং যেকোনো বৈধ দৈর্ঘ্য একক গ্রহণ করে। |
| auto | তিনটি ফ্লেক্স প্রপার্টিকে 1 1 auto হিসেবে সেট করে। |
| initial | ফ্লেক্স প্রপার্টিকে ডিফল্ট মান 0 1 auto-এ সেট করে। |
| none | 0 0 auto-এর সমান। |
| inherit | প্যারেন্ট এলিমেন্ট থেকে প্রপার্টির মান উত্তরাধিকারসূত্রে পায়। |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 400px;
height: 80px;
display: flex;
}
#demo div {
flex: 1 3 auto;
}
div:nth-of-type(even) {
box-shadow: inset 0 0 12px red;
}
div:nth-of-type(odd) {
box-shadow: inset 0 0 12px blue;
}
</style>
<script>
function changeFlex() {
document.getElementsByTagName("DIV")[1].style.flex = "none";
document.getElementsByTagName("DIV")[4].style.flex = "none";
document.getElementById("Sample").innerHTML = "প্রথম এবং চতুর্থ ডিভের ফ্লেক্স মান none-এ পরিবর্তন করা হয়েছে";
}
</script>
</head>
<body>
<div id="demo">
<div id="orange"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
</div>
<p>নিচের বাটনে ক্লিক করে উপরের ডিভগুলোর ফ্লেক্স প্রপার্টি পরিবর্তন করুন</p>
<button onclick="changeFlex()">ফ্লেক্স পরিবর্তন করুন</button>
<p id="Sample"></p>
</body>
</html>
আউটপুট
প্রাথমিক অবস্থায় চারটি ডিভ নমনীয় আকারে প্রদর্শিত হবে।
"ফ্লেক্স পরিবর্তন করুন" বাটনে ক্লিক করার পর প্রথম এবং চতুর্থ ডিভের ফ্লেক্স মান none হবে, ফলে তারা আর ফ্লেক্সIBLE থাকবে না।
