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

Thuộc tính flexShrink (CSS flex-shrink) xác định khả năng co lại của flex item khi tổng kích thước cơ sở (flex-basis) vượt quá container. Giá trị mặc định là 1.

Ví dụ minh họa

Hai DIV có flex-basis: 300px trong container 500px. Nhấn nút để DIV2 co lại gấp 5 lần DIV1:

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

Cách tính toán co lại (shrink)

Khi container nhỏ hơn tổng flex-basis:

1. Tính "hệ số co" của mỗi item: flex-shrink * flex-basis
2. Tổng hệ số co = tổng của tất cả items
3. Mỗi item bị trừ đi: (hệ số item / tổng hệ số) * không gian thừa

Ví dụ: DIV1 (shrink=1, basis=300), DIV2 (shrink=5, basis=300). Tổng basis=600, container=500 → thừa 100px. Hệ số: 300 và 1500. Tổng=1800. DIV1 mất 100*(300/1800)=16.7px. DIV2 mất 83.3px.