Thuộc tính flexBasis kiểu HTML DOM được sử dụng để chỉ định kích thước ban đầu của một phần tử có hiển thị flex. Thuộc tính flexBasis có mức độ ưu tiên cao hơn chiều rộng đối với bất kỳ giá trị nào khác ngoài tự động cho cơ sở linh hoạt.
Sau đây là cú pháp cho -
Đặt thuộc tính flexBasis -
object.style.flexBasis = "number|auto|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| số | Xác định sai độ dài ban đầu của các mục linh hoạt theo tỷ lệ phần trăm hoặc bất kỳ đơn vị độ dài hợp pháp nào. |
| auto | Đặt chiều dài bằng chiều dài mục linh hoạt. Nếu độ dài không được chỉ định thì nó sẽ tùy theo nội dung của nó. Đây là giá trị mặc định. |
| tên đầu tiên | Xác nhận thuộc tính này về giá trị ban đầu. |
| kế thừa | Kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ cho thuộc tính flexBasis -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#demo, #demo2{
background-color: #fff8dc;
margin: 10px;
height: 100px;
box-shadow: 0 0 0 4px brown;
display: flex;
}
#demo div {
flex-basis: 110px;
}
</style>
<script>
function changeFlexBasis() {
for(var i=1;i<3;i++){
document.getElementsByTagName("DIV")[i].style.flexBasis="200px";
}
document.getElementById("Sample").innerHTML="The flex basis value is increased to 200px";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
<div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
<div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
</div>
<p>Change the flex basis property for the image present inside divs by clicking the below button</p>
<button onclick="changeFlexBasis()">Change Flex Basis</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi cơ sở linh hoạt Nút ”-
