Bài 5. Flexbox

Flexbox sắp xếp các phần tử theo một hàng hoặc một cột, căn chỉnh và chia khoảng trống dễ dàng.

35 phútCơ bản
Bạn sẽ học được
  • Bật flex và hiểu trục chính, trục phụ
  • Dùng justify-content, align-items, gap, wrap
  • Điều khiển co giãn bằng flex-grow, shrink, basis
  • Làm thanh menu, thẻ, căn giữa
Thuật ngữ cần biết
Flex container
Phần tử có display:flex.
Flex item
Các con trực tiếp của container.
Trục chính (main axis)
Hướng sắp xếp, mặc định ngang.
Trục phụ (cross axis)
Trục vuông góc với trục chính.

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 */
}
justify-contentHiệu quả
flex-startdồn về đầu
centergiữa
space-betweenđều, sát hai mép
space-aroundđều, có đệm hai bên
space-evenlykhoảng cách bằng nhau

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; }
Tình huống: Hàng thẻ khóa học

Ba thẻ khóa học nằm ngang, tự xuống dòng trên điện thoại:

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

Dùng trò chơi Flexbox Froggy (flexboxfroggy.com) để luyện tập vui hơn.

Lưu ý

Khi đặt flex-direction: column, trục chính đổi thành dọc nên justify-content căn theo chiều dọc.

Thực hành
  1. Làm thanh điều hướng có logo trái, 4 liên kết phải.
  2. Căn giữa một hộp trong màn hình.
  3. Làm hàng 3 thẻ co giãn và xuống dòng.
Tóm tắt bài học
  • Flexbox dành cho bố cục một chiều.
  • justify-content theo trục chính, align-items theo trục phụ.
  • gap thay margin giữa các phần tử, flex-wrap cho đáp ứng.