Thuộc tính flex Style của HTML DOM được sử dụng để đặt hoặc trả về độ dài linh hoạt cho các phần tử có thuộc tính hiển thị được đặt thành flex. Nó được sử dụng để thao tác các thuộc tính flexGrow, flexShrink và flexBasis.
Sau đây là cú pháp cho -
Đặt thuộc tính flex -
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
Sau đây là các giá trị -
| Giá trị | Mô tả |
|---|---|
| flex-grow | Nó sẽ phát triển mục này so với phần còn lại của mục linh hoạt theo số agiven. |
| flex-co | Giá trị của mục liên quan đến phần còn lại của các mục linh hoạt theo số agiven. Anumber chỉ định số lượng mặt hàng sẽ co lại so với mặt hàng linh hoạt |
| flex-base | Xác định sai chiều dài mục và lấy bất kỳ đơn vị chiều dài hợp pháp nào. |
| tự động | Đặt ba thuộc tính flex dưới dạng 1 1 auto. |
| tên ban đầu | Đặt thuộc tính flex thành giá trị mặc định là 0 1 auto. |
| không có | Sameas 0 0 tự động. |
| 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 flex -
Ví dụ
<!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> Đầu ra
Khi nhấp vào nút “ Thay đổi linh hoạt ”-
