Thuộc tính HTML DOM Style flexGrow được sử dụng để đặt tỷ lệ mà một phần tử đáp ứng kích thước của nó bên trong một phần tử flex. Nó chấp nhận các giá trị số không có đơn vị.
Sau đây là cú pháp cho -
Đặt thuộc tính flexGrow -
object.style.flexGrow = "number|initial|inherit"
Ở đây, số chỉ định mức độ phát triển của phần tử tương ứng với các phần tử khác và giá trị mặc định của nó là 0. Ban đầu đặt giá trị thuộc tính thành giá trị mặc định trong khi kế thừa đặt giá trị đó thành giá trị thuộc tính mẹ.
Chúng ta hãy xem một ví dụ cho thuộc tính flexGrow -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 100px;
border: 3px groove navy;
display: flex;
text-align: center;
line-height: 90px;
}
div div {
box-shadow: inset 0 0 4px indigo;
}
#demo div:nth-of-type(even) {
flex-grow: 1;
background-color: lavender;
}
#demo div:nth-of-type(odd) {
flex-grow: 1;
background-color: thistle;
}
</style>
<script>
function changeFlexGrow() {
for(var i=1;i<6;i+=2)
document.getElementsByTagName("div")[i].style.flexGrow="3";
document.getElementById("Sample").innerHTML="The odd div elements are now grown 3x their even counterparts";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div>DEMO</div>
<div></div>
<div></div>
</div>
<p>Change the above odd div size by clicking the below button</p>
<button onclick="changeFlexGrow()">Change Flex Grow</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi Tăng trưởng linh hoạt Nút ”-
