Bố cục CSS Flexbox: Làm chủ justify-content, align-items và gap

27/9/2026 ·

Flexbox mang đến cách rõ ràng để xác định vị trí các phần tử trên trục chính và trục phụ của một vùng chứa. Hướng dẫn bố cục CSS này tập trung vào ba thuộc tính giúp giải quyết hầu hết vấn đề căn chỉnh: justify-content, align-items và gap. Khi sử dụng kết hợp, chúng tạo ra khoảng cách có thể dự đoán mà không cần thêm phần tử bao bọc, margin dễ hỏng hay positioning phức tạp.

Bắt đầu với các trục

Mỗi vùng chứa flex đều có trục chính và trục phụ. Trục chính tuân theo flex-direction. Với giá trị mặc định là row, trục chính chạy theo chiều ngang từ trái sang phải. Với column, nó chạy theo chiều dọc từ trên xuống. Trục phụ chạy vuông góc với trục chính.

Sự phân biệt này rất quan trọng vì justify-content kiểm soát khoảng trống trên trục chính, trong khi align-items kiểm soát căn chỉnh trên trục phụ. Nếu bạn nhầm lẫn hai thứ này, một thiết lập có thể dường như không hoạt động. Ví dụ, justify-content: center sẽ không căn giữa theo chiều dọc một hàng các phần tử; align-items: center mới làm điều đó.

Trước khi điều chỉnh giá trị, hãy xác nhận vùng chứa thực sự là một vùng chứa flex và kiểm tra hướng của nó:

display: flex; tạo ngữ cảnh định dạng flex.
flex-direction: row; làm cho trục chính nằm ngang.
flex-direction: column; làm cho trục chính nằm dọc.

Sử dụng justify-content cho trục chính

Thuộc tính justify-content phân phối không gian trống giữa các phần t�� flex dọc theo trục chính. Nó rất hữu ích khi các phần tử không chiếm hết toàn bộ dòng hoặc khi bạn muốn kiểm soát cách không gian thừa được chia sẻ.

Các giá trị justify-content phổ biến

flex-start: sắp xếp các phần tử về phía đầu của trục chính.
center: căn giữa toàn bộ nhóm theo trục chính.
flex-end: sắp xếp các phần tử về phía cuối của trục chính.
space-between: đặt khoảng cách bằng nhau giữa các phần tử, không có khoảng trống thừa ở các cạnh.
space-around: cho mỗi phần tử khoảng cách bằng nhau ở cả hai bên, nên các khoảng cách ở cạnh trông nhỏ hơn khoảng cách ở giữa.
space-evenly: tạo các khoảng cách bằng nhau ở mọi nơi, bao gồm cả các cạnh ngoài.

Chọn giá trị phù hợp với quy tắc hình ảnh bạn muốn. Đối với thanh công cụ có một nhóm ở mỗi đầu, sử dụng justify-content: space-between. Đối với hàng điều hướng được căn giữa, sử dụng center. Đối với thư viện ảnh nơi khoảng cách cạnh phải khớp với khoảng cách bên trong, sử dụng space-evenly.

Hãy nhớ rằng justify-content không kéo giãn chính các phần tử. Nếu một phần tử cần chiếm không gian còn lại, hãy sử dụng flex grow thông qua thuộc tính flex thay vì.

Sử dụng align-items cho trục phụ

Thuộc tính align-items kiểm soát cách các phần tử được định vị trên trục phụ. Nó có thể căn chỉnh các phần tử về đầu, giữa, cuối hoặc kéo giãn chúng để lấp đầy không gian trục phụ có sẵn.

Các giá trị align-items phổ biến

stretch: làm cho các phần tử chiếm đầy kích thước phụ của vùng chứa, đây là mặc định cho nhiều bố cục flex.
flex-start: căn chỉnh các phần tử về phía trên của vùng chứa hàng hoặc đầu của vùng chứa cột.
center: căn giữa các phần tử theo trục phụ.
flex-end: căn chỉnh các phần tử về cuối hoặc đáy của trục phụ.
baseline: căn chỉnh các phần tử theo đường cơ sở văn bản của chúng, rất hữu ích cho các kích thước phông chữ hỗn hợp.

Đối với một hàng thẻ có độ dài nội dung khác nhau, align-items: flex-start giữ cho cạnh trên của mỗi thẻ được căn chỉnh trong khi cho phép chiều cao tự nhiên. Sử dụng stretch khi các thẻ cần có cùng chiều cao. Sử dụng baseline khi các nhãn có kích thước khác nhau cần đọc thành một dòng.

Sử dụng gap cho khoảng cách nhất quán

Thuộc tính gap đặt khoảng cách giữa các phần tử flex mà không thêm khoảng trống trước phần tử đầu tiên hay sau phần tử cuối cùng. Nó thay thế nhiều thủ thuật margin và giữ cho khoảng cách nhất quán khi các phần tử bị ngắt dòng.

Bạn có thể đặt một giá trị cho tất cả các khoảng cách hoặc các giá trị riêng biệt cho khoảng cách hàng và cột:

gap: 16px; sử dụng cùng khoảng cách ở cả hai hướng.
gap: 12px 24px; sử dụng 12px giữa các hàng và 24px giữa các cột.

Gap hoạt động với việc ngắt dòng, nên một lưới thẻ responsive sẽ giữ khoảng cách đều nhau trên nhiều dòng. Không giống justify-content, gap không phân phối không gian thừa. Nó chỉ xác định khoảng cách giữa các phần tử liền kề. Điều này khiến nó trở thành một người bạn đồng hành đáng tin cậy của justify-content chứ không phải sự thay thế.

Kết hợp ba thuộc tính

Căn chỉnh trở nên dễ dàng hơn khi bạn xác định vai trò của từng thuộc tính trước khi viết CSS:

justify-content quyết định nhóm ngồi ở đâu hoặc không gian trống được phân phối như thế nào trên trục chính.
align-items quyết định các phần tử cá nhân được sắp xếp như thế nào trên trục phụ.
gap xác định khoảng cách tối thiểu giữa các phần tử.

Ví dụ, một thanh điều hướng căn giữa có thể sử dụng justify-content: center để đặt nhóm ở giữa, align-items: center để căn chỉnh nhãn theo chiều dọc, và gap: 24px để giữ các liên kết cách đều nhau. Một lưới sản phẩm có thể sử dụng justify-content: space-between để phân bổ các thẻ trên một hàng, align-items: start để giữ các thẻ căn chỉnh trên cùng, và gap: 20px để duy trì các rãnh nhất quán.

Xử lý ngắt dòng và hành vi responsive

Khi flex-wrap: wrap được bật, các phần tử có thể chuyển sang dòng mới. justify-content sau đó áp dụng cho mỗi dòng, trong khi gap kiểm soát khoảng cách trong mỗi dòng. Sự kết hợp này rất hữu ích cho các thanh công cụ responsive và bộ sưu tập thẻ.

Hãy thử nghiệm trên các viewport hẹp và rộng. Một giá trị trông hoàn hảo ở độ rộng desktop có thể tạo ra các khoảng cách khó xử trên điện thoại. Trong nhiều trường hợp, gap nhỏ hơn và giá trị justify-content đơn giản hơn hoạt động tốt hơn trên màn hình nhỏ. Media queries có thể điều chỉnh các giá trị này mà không thay đổi cấu trúc của trang.

Debug căn chỉnh từng bước

Nếu một quy tắc căn chỉnh có vẻ bị bỏ qua, hãy kiểm tra vùng chứa trước. Xác nhận display: flex, xác minh flex-direction, và đảm bảo phần tử bạn đang định dạng là cha trực tiếp của các phần tử con. Sau đó kiểm tra xem phần tử có chiều rộng cố định, margin mâu thuẫn hay transform thay đổi vị trí hình ảnh của nó hay không.

Cũng hãy nhớ rằng align-self và justify-self có thể ghi đè các giá trị mặc định của vùng chứa cho một phần tử duy nhất. justify-self được hỗ trợ trong bố cục flex trên các trình duyệt hiện đại, nhưng justify-content ở cấp vùng chứa vẫn là cách rõ ràng nhất để quản lý toàn bộ nhóm.

Kết luận

Căn chỉnh Flexbox trở nên đơn giản khi bạn tách trục chính khỏi trục phụ. Hãy để justify-content quản lý phân phối dọc theo trục chính, để align-items kiểm soát vị trí trên trục phụ, và sử dụng gap cho khoảng cách đáng tin cậy giữa các phần tử. Hướng dẫn căn chỉnh flexbox justify content align items này cung cấp cho bạn phương pháp có thể lặp lại để xây dựng giao diện sạch sẽ, responsive mà không cần các thủ thuật bố cục dễ hỏng.