คุณสมบัติ flexGrow ของ HTML DOM Style: อัตราการขยาย Flex Item

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

ไวยากรณ์ (Syntax)

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

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

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

<!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 = "Div เลขคี่ขยาย 3 เท่าของ Div เลขคู่";
  }
</script>
</head>
<body>
<div id="demo">
  <div></div><div></div><div>DEMO</div><div></div><div></div>
</div>
<p>คลิกปุ่มเพื่อเปลี่ยนขนาด Div เลขคี่ในกลุ่มด้านบน</p>
<button onclick="changeFlexGrow()">เปลี่ยน Flex Grow</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: 5 div flex-grow: 1 ทุกตัว → แบ่งพื้นที่เท่ากัน
หลัง: Div เลขคี่ (1,3,5) flex-grow: 3, Div เลขคู่ (2,4) flex-grow: 1 → Div เลขคี่กว้าง 3 เท่า

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

Container width: 600px
Items: 5 ตัว flex-basis: 0 (หรือ auto)

1. พื้นที่พร้อมขยาย = Container - Sum(flex-basis)
2. Total Grow Factors = Sum(flex-grow ของทุก Item)
3. พื้นที่ต่อ 1 Grow Unit = พื้นที่พร้อมขยาย / Total Grow Factors
4. ขนาดสุดท้าย = flex-basis + (flex-grow × พื้นที่ต่อ 1 Unit)

ตัวอย่าง:
flex-grow: [3, 1, 3, 1, 3]  → Total = 11
พื้นที่ว่าง = 600px
1 Unit = 600/11 ≈ 54.5px
Item 1,3,5: 0 + 3×54.5 = 163.6px
Item 2,4:   0 + 1×54.5 = 54.5px

ค่า flex-grow พิเศษ

Flex Shorthand

/* flex: grow shrink basis */
.item { flex: 1 1 120px; }   /* grow=1, shrink=1, basis=120px */
.item { flex: 2 0 100px; }   /* grow=2, ไม่หด, basis=100px */
.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 */

/* Sidebar + Main Content */
.layout {
  display: flex;
}
.sidebar { flex: 0 0 280px; }      /* คงที่ 280px */
.main { flex: 1 1 auto; }          /* เติมพื้นที่เหลือ */

/* Equal Width Columns */
.columns {
  display: flex;
}
.column { flex: 1; }               /* แบ่งเท่ากัน */

/* Sticky Footer */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.content { flex: 1; }              /* ขยายเต็มพื้นที่ */