Cách thiết lập tỷ lệ lớn lên của flex item tương đối với các item khác với JavaScript

Thuộc tính flexGrow (CSS flex-grow) xác định khả năng mở rộng của flex item để lấp đầy không gian thừa trên trục chính. Giá trị mặc định là 0 (không lớn lên).

Ví dụ minh họa

Ba DIV ban đầu flex-grow: 0. Nhấn nút để DIV3 lớn gấp 2 lần DIV1 và DIV2:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 1px solid #000;
      width: 250px;
      height: 150px;
      display: flex;
      flex-flow: row wrap;
    }
    #box div {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: 20px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div style="background-color:orange;">DIV1</div>
    <div style="background-color:blue;">DIV2</div>
    <div style="background-color:yellow;" id="myID">DIV3</div>
  </div>
  <p>Sử dụng thuộc tính flexGrow</p>
  <button onclick="display()">Thiết lập</button>
  <script>
    function display() {
      document.getElementById("myID").style.flexGrow = "2";
    }
  </script>
</body>
</html>

Cách tính toán flex-grow

Khi có không gian thừa:

1. Tổng flex-grow của tất cả items = G
2. Mỗi item nhận thêm: (flex-grow của item / G) * không gian thừa

Ví dụ: DIV1=0, DIV2=0, DIV3=2. Tổng G=2. Không gian thừa = 190px. DIV3 nhận thêm 190px. Kết quả: DIV1=20px, DIV2=20px, DIV3=20+190=210px.