คุณสมบัติ flexShrink ของ HTML DOM Style: อัตราการหดตัว Flex Item

คุณสมบัติ flexShrink ใช้นิยามสัดส่วนที่ Flex Item จะหดตัว (Shrink) ลงเมื่อพื้นที่ใน Flex Container ไม่พอ ใช้ร่วมกับ flexGrow และ flexBasis

ไวยากรณ์ (Syntax)

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

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!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; }  /* แต่ละอันกว้าง 120px รวม 600px > 500px */
</style>
<script>
  function changeFlexShrink() {
    document.getElementsByTagName("DIV")[4].style.flexShrink = "3";
    document.getElementById("Sample").innerHTML = "อีเลเมนต์ที่ 4 หดตัว 3 เท่าของเพื่อนร่วมกลุ่ม";
  }
</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>คลิกปุ่มเพื่อเปลี่ยน shrink property ของ div ที่ 4 ในกลุ่มด้านบน</p>
<button onclick="changeFlexShrink()">เปลี่ยน Flex Shrink</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: 5 div แต่ละอัน flex-shrink: 1 (หดตัวเท่ากัน) รวม 600px → บีบเหลือ 500px แต่ละอัน 100px
หลัง: div ที่ 4 มี flex-shrink: 3 หดตัวมากกว่าเพื่อน 3 เท่า → div ที่ 4 เล็กที่สุด

กลไกการคำนวณ Flex Shrink

ขั้นตอน:
1. คำนวณพื้นที่เกิน (Overflow) = Sum(flex-basis) - Container Width
   = 600px - 500px = 100px

2. คำนวณ "Shrink Factor" ของแต่ละ Item
   = flex-shrink × flex-basis
   Item 1-3,5: 1 × 120 = 120
   Item 4: 3 × 120 = 360
   รวม Shrink Factors = 120×4 + 360 = 840

3. คำนวณพื้นที่ที่แต่ละ Item ต้องหด
   Item 1-3,5: (120/840) × 100px = 14.29px หด → ความกว้าง = 105.71px
   Item 4: (360/840) × 100px = 42.86px หด → ความกว้าง = 77.14px

ค่า flex-shrink พิเศษ

Flex Shorthand

/* flex: grow shrink basis */
.item { flex: 1 1 120px; }     /* grow=1, shrink=1, basis=120px */
.item { flex: 0 0 120px; }     /* ไม่ยืด ไม่หด คงที่ 120px */
.item { flex: 1; }             /* grow=1, shrink=1, basis=0% */
.item { flex: auto; }          /* grow=1, shrink=1, basis=auto */
.item { flex: none; }          /* grow=0, shrink=0, basis=auto */