Bạn sẽ xếp một nhóm phần tử theo một chiều bằng Flexbox, nhìn được trục chính và trục chéo, rồi chọn đúng thuộc tính căn chỉnh thay vì thử justify và align ngẫu nhiên.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Container và item là hai vai trò khác nhau

display:flex đặt trên vùng chứa. Những phần tử con trực tiếp trở thành flex item; không phải mọi hậu duệ bên trong đều tự thành item của cùng container. Muốn một nhóm lồng bên trong cũng dùng Flexbox, hãy tạo container phù hợp cho chính nhóm đó.

Flexbox hữu ích với bố trí theo một chiều như hàng menu hoặc nhóm nút. Một số trường hợp Grid vẫn có thể làm được cùng kết quả; lựa chọn nên dựa vào cấu trúc cần kiểm soát, không phải coi một công cụ luôn tốt hơn.

Đặt tên đúng cho hai trục

flex-direction xác định trục chính. Với row trong chế độ viết thông thường trái sang phải, trục chính chạy ngang; column làm trục chính chạy dọc. Trục chéo vuông góc với trục chính. Vì còn writing mode và direction, không nên học máy móc rằng justify-content luôn là căn ngang.

justify-content phân phối không gian trống theo trục chính; align-items căn item trong trục chéo của dòng. Một thuộc tính căn giữa có thể trông không tác dụng khi container không có khoảng trống ở trục đó.

Gap và kích thước item

gap tạo khoảng cách giữa các item. Nó không tự tạo khoảng cách từ item ngoài cùng tới biên container; padding đảm nhận việc đó. Flex-grow, flex-shrink và flex-basis cùng tham gia tính kích thước; mặc định không phải mọi item chia đều toàn bộ vùng.

Nếu một chuỗi dài khiến item không co như mong muốn, kiểm tra min-size mặc định và khả năng ngắt dòng. Đôi khi min-width:0 trên item chứa nội dung dài là cần thiết, thay vì cắt cả trang bằng overflow:hidden.

Thử một thay đổi mỗi lần

Ví dụ dùng một nhóm ba nhãn có nội dung dài ngắn khác nhau. Đầu tiên quan sát hàng ngang; đổi flex-direction thành column rồi dự đoán justify-content và align-items ảnh hưởng theo trục nào. Đừng đổi cả ba thuộc tính một lúc rồi chỉ nhớ kết quả cuối.

DevTools có flex overlay giúp nhìn container, item và khoảng trống. Overlay không giải thích thay bạn nhu cầu nội dung, nhưng giúp xác nhận cấu trúc mà quy tắc đang điều khiển.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<div class="flex-sample"><span>HTML</span><span>CSS có nội dung dài hơn</span><span>JavaScript</span></div>

Thêm hoặc sửa trong styles.css

.flex-sample { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; border: 1px solid #b8cada; }
.flex-sample span { padding: .5rem; background: #e9f4ff; }
@media (max-width: 28rem) { .flex-sample { flex-direction: column; align-items: stretch; } }

So sánh trước và sau

Ở vùng đủ rộng, các item nằm trên một hàng và khoảng trống được phân phối. Ở vùng rất hẹp, ví dụ đổi thành cột để không cố nhét nội dung; media query sẽ được giải thích kỹ ở bài 15.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Đặt flex lên item thay vì cha khi muốn xếp các anh em: kiểm tra container.
• Nhớ justify là ngang bất kể direction: xác định trục.
• Dùng space-between thay cho mọi margin và padding: phân biệt khoảng trong và ngoài.

Tự kiểm tra

• Đổi row thành column và vẽ lại hai trục bằng lời.
• Đổi space-between sang center rồi quan sát phần khoảng trống còn lại.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML