คุณสมบัติ flex-grow ใน CSS Flexbox

flex-grow คืออะไร?

คุณสมบัติ flex-grow กำหนด อัตราส่วนการขยายตัว ของ flex item เมื่อมีพื้นที่ว่างเหลือบน Main Axis ค่าตัวเลขแทน "ส่วนแบ่ง" ของพื้นที่ว่างที่ item นั้นจะได้รับ

วิธีทำงาน

• ค่าเริ่มต้น: 0 (ไม่ขยาย)
• ค่าตัวเลขบวก: สัดส่วนของพื้นที่ว่าง
• คิดเป็นสัดส่วน: item_grow / sum_of_all_grow × พื้นที่ว่าง

ตัวอย่าง: Q3 ใหญ่กว่าอื่นๆ (flex-grow: 20)

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #fff3e0;
      align-content: space-between;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      border: 2px solid #ff9800;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      width: 100px;          /* flex-basis เริ่มต้น */
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง flex-grow: Q3 ขยายมากที่สุด</h1>
  <div class="mycontainer">
    <div style="flex-grow: 1">Q1 (grow: 1)</div>
    <div style="flex-grow: 1">Q2 (grow: 1)</div>
    <div style="flex-grow: 20">Q3 (grow: 20) - ใหญ่ที่สุด</div>
    <div style="flex-grow: 1">Q4 (grow: 1)</div>
    <div style="flex-grow: 1">Q5 (grow: 1)</div>
  </div>
</body>
</html>

การคำนวณพื้นที่ (Flex Grow Calculation)

/* สมมติ:
   Container width: 800px
   5 items: width 100px แต่ละอัน = 500px ใช้ไป
   พื้นที่ว่าง = 300px
   flex-grow: Q1=1, Q2=1, Q3=20, Q4=1, Q5=1
   รวม grow = 24
*/

/* Q1, Q2, Q4, Q5 ได้: (1/24) × 300 = 12.5px เพิ่ม
   Q3 ได้: (20/24) × 300 = 250px เพิ่ม

   ผลลัพธ์สุดท้าย:
   Q1, Q2, Q4, Q5 = 112.5px
   Q3 = 350px */

ตัวอย่างปฏิบัติ: Sidebar + Main Content

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;      /* grow: 0, shrink: 0, basis: 250px - คงที่ */
}

.main-content {
  flex: 1 1 auto;       /* grow: 1, shrink: 1 - ขยายเต็มพื้นที่เหลือ */
  min-width: 0;         /* สำคัญ: ป้องกัน overflow */
}

ตัวอย่าง: Equal Width Columns

.equal-columns {
  display: flex;
}

.equal-columns > * {
  flex-grow: 1;         /* ทุกตัวขยายเท่าๆ กัน */
  flex-basis: 0;        /* สำคัญ: เริ่มจาก 0 เพื่อแบ่งเท่ากันจริง */
  /* หรือใช้ shorthand: flex: 1; */
}

flex-grow vs flex-shrink vs flex-basis

Shorthand: flex

/* flex:    */
flex: 1;              /* 1 1 0% - ขยายเท่ากัน */
flex: 2;              /* 2 1 0% - ขยาย 2 เท่า */
flex: 0 0 200px;      /* คงที่ 200px */
flex: 1 1 auto;       /* grow/shrink ปกติ, basis = auto */
flex: 0 1 auto;       /* default: 不ขยาย แต่บีบได้ */
flex: 1 0 300px;      /* ขยายได้ แต่ไม่บีบ, เริ่ม 300px */

คำแนะนำ

• ใช้ flex: 1 (หรือ flex-grow: 1; flex-basis: 0) สำหรับคอลัมน์เท่าๆ กัน
• Sidebar ใช้ flex: 0 0 250px (ไม่ขยาย ไม่บีบ คงที่)
• Content ใช้ flex: 1 (ขยายเต็มพื้นที่เหลือ)
• เพิ่ม min-width: 0 บน item ที่มี flex-grow เพื่อป้องกัน overflow