Bài 5. Flexbox

Khái niệm và lý thuyết

Flexbox dựa trên khái niệm hai trục. Container có trục chính (hướng sắp xếp, mặc định ngang theo flex-direction: row) và trục phụ vuông góc. justify-content phân bổ khoảng trống dọc theo trục chính; align-items căn theo trục phụ. Khi đổi sang column, hai trục hoán đổi nên hai thuộc tính này đổi chiều tác dụng.

Mỗi item có ba thuộc tính co giãn gộp trong flex: grow (tỉ lệ nhận phần dư), shrink (tỉ lệ bị co khi thiếu chỗ), basis (kích thước khởi đầu). Ví dụ flex: 1 1 200px nghĩa: ưu tiên rộng 200px, nếu dư thì cùng giãn, nếu thiếu thì cùng co.

Flexbox phù hợp khi kích thước do nội dung quyết định và bố cục theo một chiều: thanh menu, hàng nút, thẻ, căn giữa. Khi cần kiểm soát cả hàng lẫn cột cùng lúc, nên chuyển sang Grid.

Bật flex

.hang {
  display: flex;
  gap: 16px;                 /* khoảng cách giữa các con */
  flex-direction: row;       /* hoặc column */
  justify-content: space-between;  /* căn theo trục chính */
  align-items: center;       /* căn theo trục phụ */
  flex-wrap: wrap;           /* cho xuống dòng */
}

Co giãn các phần tử

.hang > .cot { flex: 1 1 200px; }  /* grow shrink basis */
.hang > .rong { flex: 2; }          /* rộng gấp đôi */
.hang > .co-dinh { flex: none; width: 120px; }

Mẫu thường dùng

/* Căn giữa tuyệt đối */
.giua { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

/* Thanh menu, logo trái, liên kết phải */
.menu { display: flex; align-items: center; }
.menu .logo { margin-right: auto; }

/* Chân trang dính đáy */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.khoa { display: flex; flex-wrap: wrap; gap: 20px; }
.khoa .the { flex: 1 1 260px; padding: 16px; border: 1px solid #ddd; border-radius: 12px; }