এইচটিএমএল ডম স্টাইল ফ্লেক্স প্রপার্টি ফ্লেক্সে সেট করা ডিসপ্লে প্রোপার্টি সহ উপাদানগুলির জন্য নমনীয় দৈর্ঘ্য সেট বা ফেরানোর জন্য ব্যবহৃত হয়। এটি flexGrow, flexShrink এবং flexBasis বৈশিষ্ট্যগুলি পরিচালনা করতে ব্যবহৃত হয়৷
−
-এর সিনট্যাক্স নিচে দেওয়া হলফ্লেক্স প্রপার্টি সেট করা হচ্ছে -
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
নিম্নোক্ত মান −
| মান | বর্ণনা |
|---|---|
| ফ্লেক্স-গ্রো | এটি প্রদত্ত সংখ্যা দ্বারা বাকি নমনীয় আইটেমের সাথে সম্পর্কিত আইটেমটিকে বৃদ্ধি করে৷ |
| ফ্লেক্স-সঙ্কুচিত | এটি প্রদত্ত সংখ্যা দ্বারা বাকি নমনীয় আইটেমগুলির সাথে সম্পর্কিত আইটেমটিকে সঙ্কুচিত করে৷ নমনীয় আইটেমগুলির তুলনায় আইটেমটি কতটা সঙ্কুচিত হবে তা নির্দিষ্ট করে |
| ফ্লেক্স-বেসিস | আইটেমের দৈর্ঘ্য সুনির্দিষ্ট করার জন্য এবং যেকোনো আইনি দৈর্ঘ্যের ইউনিট লাগে৷ |
| অটো | তিনটি ফ্লেক্স বৈশিষ্ট্য 1 1 স্বয়ংক্রিয় হিসাবে সেট করুন৷ |
| প্রাথমিক৷ | ফ্লেক্স প্রপার্টি ডিফল্ট মান সেট করুন যা 0 1 স্বয়ংক্রিয়। |
| কোনও নয়৷ | Sameas 0 0 auto |
| উত্তরাধিকার৷ | অভিভাবক সম্পত্তি মান উত্তরাধিকারসূত্রে পাওয়া |
আসুন ফ্লেক্স প্রপার্টি -
-এর জন্য একটি উদাহরণ দেখিউদাহরণ
<!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="The flex value for first and fourth div is changed to 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>Change the above divs flex property by clicking the below button</p>
<button onclick="changeFlex()">Change Flex</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
“চেঞ্জ ফ্লেক্স এ ক্লিক করলে ” -
