Thuộc tính flexShrink trong HTML DOM Style

Thuộc tính flexShrink xác định tỷ lệ co lại của một flex item so với các anh em của nó bên trong flex container khi không gian không đủ.

Cú pháp

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

number: Hệ số co (mặc định 0 - không co). Giá trị càng lớn → co nhiều hơn. initial: mặc định. inherit: kế thừa.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin: auto; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); }
  #demo {
    width: 500px;
    height: 30px;
    display: flex;
    text-align: center;
    font-size: 1.2em;
    line-height: 30px;
  }
  #demo div { flex-basis: 120px; }
</style>
<script>
  function changeFlexShrink() {
    document.getElementsByTagName("DIV")[4].style.flexShrink = "3";
    document.getElementById("Sample").innerHTML = "Phần tử thứ 4 đã được co lại 3 lần so với các phần tử khác";
  }
</script>
</head>
<body>
<div id="demo">
  <div>First Div</div>
  <div>Second Div</div>
  <div>Third Div</div>
  <div>Fourth Div</div>
  <div>Fifth Div</div>
</div>
<br>
<p>Thay đổi shrink property của div thứ 4 bằng cách nhấn nút dưới đây</p>
<button onclick="changeFlexShrink()">Thay đổi Flex Shrink</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu 5 div flex-basis 120px, tổng 600px > container 500px. Mặc định flex-shrink: 0 → tràn ra ngoài (hoặc tuỳ trình duyệt). Sau khi set div thứ 4 flex-shrink: 3, div này co lại mạnh hơn 3 lần các div khác (mặc định shrink: 1 nếu không set).

Lưu ý: flex-shrink chỉ hoạt động khi tổng flex-basis > container width. Mặc định flex-shrink: 1 (co đều).