flex-grow, flex-shrink và flex-basis hoạt động như thế nào?

Question

Accepted Answer

Ba thuộc tính này trên **flex item** điều khiển cách chúng chia sẻ không gian dọc theo main axis. Cú pháp rút gọn `flex` kết hợp cả ba.

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: kích thước khởi đầu TRƯỚC khi grow/shrink */
/*        │ └──── flex-shrink: co lại bao nhiêu khi không gian chật */
/*        └────── flex-grow: nở ra bao nhiêu để lấp đầy không gian thừa */
```

## Giải thích từng thuộc tính

- **`flex-basis`** — kích thước main-axis lý tưởng/ban đầu của item (giống `width` cho một hàng). `auto` dùng kích thước nội dung.
- **`flex-grow`** — nếu có không gian *thừa*, item này nở ra tham lam cỡ nào. `0` = không nở; số càng cao nở càng nhiều theo tỷ lệ.
- **`flex-shrink`** — nếu *không đủ* không gian, item này co lại sẵn sàng cỡ nào. `0` = không bao giờ co (có thể gây tràn); mặc định `1` = co khi cần.

## Nở ra theo tỷ lệ

```css
.a { flex-grow: 1; } /* lấy 1 phần */
.b { flex-grow: 2; } /* lấy 2 phần → gấp đôi không gian thừa so với .a */
```

Không gian thừa được chia theo tỷ lệ của các giá trị grow, không phải theo kích thước tuyệt đối.

## Các giá trị rút gọn thường gặp

```css
.item { flex: 1; }      /* = 1 1 0  → tất cả item chia sẻ không gian ĐỀU NHAU (chiều rộng bằng nhau) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink dựa trên kích thước NỘI DUNG */
.item { flex: none; }   /* = 0 0 auto → kích thước cố định, không bao giờ grow/shrink */
.sidebar { flex: 0 0 250px; } /* sidebar cố định 250px không bao giờ flex */
```

`flex: 1` trên mọi item tạo các cột bằng nhau; `flex: 0 0 250px` tạo một panel cố định chiều rộng cứng nhắc bên cạnh một panel linh hoạt.

## Một layout thực tế: sidebar cố định + content linh hoạt

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* không bao giờ grow/shrink — đúng 250px */
.content { flex: 1; }          /* lấy toàn bộ không gian còn lại */
```

## Tại sao điều này quan trọng

Các thuộc tính này là cách bạn điều khiển kích thước theo tỷ lệ trong flex layout — cột bằng nhau (`flex: 1`), panel cố định-cộng-linh hoạt (`flex: 0 0 X` + `flex: 1`), và ngăn co không mong muốn (`flex-shrink: 0`).

Hiểu basis/grow/shrink biến Flexbox từ "item chỉ nằm đó" thành điều khiển chính xác, responsive.