Flexbox là gì và làm thế nào để căn giữa nội dung với nó?

Question

Accepted Answer

**Flexbox** là một hệ thống layout một chiều — nó sắp xếp các item trong một **hàng** hoặc **cột** duy nhất và phân phối không gian dọc theo đường đó. Đây là câu trả lời hiện đại cho các vấn đề căn chỉnh và spacing mà trước kia phải dùng float và các thủ thuật.

```css
.container {
  display: flex;              /* bật flex; các con trở thành flex item */
  flex-direction: row;       /* main axis: row (mặc định) hoặc column */
  gap: 1rem;                 /* khoảng cách GIỮA các item (không cần margin hack) */
}
```

## Hai trục

Flexbox có một **main axis** (hướng các item chảy) và một **cross axis** (vuông góc). Các thuộc tính ánh xạ với chúng:

```css
.container {
  justify-content: center; /* căn dọc theo MAIN axis */
  align-items: center;     /* căn dọc theo CROSS axis */
}
```

## Căn giữa hoàn hảo — trường hợp dùng nổi tiếng

```css
.center {
  display: flex;
  justify-content: center; /* ngang (main axis = row) */
  align-items: center;     /* dọc (cross axis) */
  min-height: 100vh;
}
```

Ba dòng đó căn giữa một phần tử con cả theo chiều ngang và chiều dọc — một việc từng nổi tiếng là khó trước khi có Flexbox.

## Các mẫu thường gặp

```css
/* đẩy các item ra hai bên: logo trái, menu phải */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* xuống dòng mới khi item không vừa */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

Các tùy chọn `justify-content` gồm `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

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

Flexbox là công cụ hàng ngày cho navbar, nhóm button, hàng card, căn giữa, và bất kỳ layout "một hàng item" nào.

Hiểu mô hình main/cross axis (và việc `justify-content`/`align-items` đổi ý nghĩa khi bạn thay đổi `flex-direction`) là mô hình tư duy then chốt.

Dùng Flexbox cho layout 1D và Grid cho 2D.