flex-grow, flex-shrink และ flex-basis ทำงานอย่างไร

Question

Accepted Answer

คุณสมบัติสามประการนี้บน **flex items** ควบคุมวิธีการแบ่งปันพื้นที่ตามแนวแกนหลัก คำย่อ `flex` รวมมันเข้าด้วยกัน

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## คุณสมบัติแต่ละอย่างอธิบาย

- **`flex-basis`** — ขนาดแกนหลักในอุดมคติ/เริ่มต้นของรายการ (เช่น `width` สำหรับแถว) `auto` ใช้ขนาดของเนื้อหา
- **`flex-grow`** — หากมีพื้นที่*เพิ่มเติม* รายการนี้จะขยายตัวมากเพียงใด `0` = ไม่ขยาย; ตัวเลขที่สูงกว่าจะขยายตามสัดส่วน
- **`flex-shrink`** — หากไม่มีพื้นที่*เพียงพอ* รายการนี้จะหดตัวเร็วเพียงใด `0` = ไม่เคยหดตัว (อาจเกิดการล้นได้); ค่าเริ่มต้น `1` = หดตัวตามต้องการ

## การเพิ่มขึ้นตามสัดส่วน

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

พื้นที่เพิ่มเติมแบ่งตามอัตราส่วนของค่าการเติบโต ไม่ใช่ขนาดสัมบูรณ์

## ค่าคำย่อทั่วไป

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1` บนรายการทุกรายการสร้างคอลัมน์เท่ากัน; `flex: 0 0 250px` สร้างพาเนลแข็งที่มีความกว้างคงที่ถัดจากพาเนลที่ยืดหยุ่น

## เลย์เอาต์จริง: ส่วนข้างคงที่ + เนื้อหาไหลลื่น

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## ทำไมจึงสำคัญ

คุณสมบัติเหล่านี้เป็นวิธีที่คุณควบคุมการเปลี่ยนแปลงขนาดตามสัดส่วนในเลย์เอาต์ flex — คอลัมน์เท่ากัน (`flex: 1`) พาเนลคงที่บวกยืดหยุ่น (`flex: 0 0 X` + `flex: 1`) และการป้องกันการหดตัวที่ไม่ต้องการ (`flex-shrink: 0`)

การทำความเข้าใจ basis/grow/shrink เปลี่ยน Flexbox จากการที่ "รายการแค่นั่งอยู่ที่นั่น" ไปเป็นการควบคุมที่แม่นยำและตอบสนอง