Thuộc tính flexGrow trong HTML DOM Style

Thuộc tính flexGrow xác định tỷ lệ mở rộng của một flex item so với các anh em khi còn không gian dư thừa trong flex container. Chấp nhận giá trị số không đơn vị (unitless).

Cú pháp

object.style.flexGrow = "number|initial|inherit"

number: Hệ số lớn (mặc định 0 - không lớn). initial: mặc định. inherit: kế thừa.

Ví dụ minh họa

<!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 = "Các div lẻ hiện lớn gấp 3 lần các div chẵn";
  }
</script>
</head>
<body>
<div id="demo">
  <div></div>
  <div></div>
  <div>DEMO</div>
  <div></div>
  <div></div>
</div>
<p>Thay đổi kích thước div lẻ ở trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeFlexGrow()">Thay đổi Flex Grow</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu tất cả div flex-grow: 1 → chia đều không gian dư. Sau khi nhấn nút, các div chẵn (index 1,3,5 trong demo) set flex-grow: 3 → lớn gấp 3 lần div lẻ (grow: 1).

Cơ chế: Không gian dư = container width - tổng flex-basis. Phân bổ theo tỷ lệ flex-grow.