Tạo Flexbox

Cách hoạt động

Flexbox không phức tạp, nhưng có một điều khiến gần như ai cũng vấp: justify-content và align-items không có nghĩa là ngang và dọc. Chúng có nghĩa là dọc theo hướng và vuông góc với hướng, mà hướng là thứ do bạn đặt.

Cái bẫy, nói thẳng

Với flex-direction: row, justify-content hoạt động theo chiều ngang và align-items theo chiều dọc. Chuyển sang column và chúng đổi chỗ hoàn toàn. Mọi giờ phút mất đi với flexbox về cơ bản là vì điều này. Phần giải thích bên dưới cập nhật khi bạn đổi hướng, để mối quan hệ hiện rõ thay vì phải học thuộc.

Trục chính và trục phụ

Trục chính là trục mà các mục chảy theo, do flex-direction đặt. Trục phụ vuông góc với nó. justify-content phân bổ khoảng trống dọc theo trục chính; align-items định vị các mục trên trục phụ. Khi hai tên gọi đó đã nhớ, phần còn lại tự theo sau.

gap, và tại sao nó thay thế margin

gap đặt khoảng trống giữa các mục mà không thêm ra ngoài mục đầu và cuối, đúng là điều margin làm sai và là điều người ta từng sửa bằng các mẹo :last-child. Nó được hỗ trợ ở mọi trình duyệt hiện nay và không còn lý do gì để tránh dùng.

nowrap nghĩa là co lại, không phải tràn ra

Mặc định là nowrap, và các mục co nhỏ hơn kích thước tự nhiên để vừa thay vì xuống dòng mới. Đó là lý do văn bản đôi khi bị ép bất ngờ trong một hàng flex. Đặt wrap cho phép các mục xuống dòng thay vì co; min-width: 0 trên phần tử con ngăn nó co nhỏ hơn nội dung của nó.

Căn giữa theo cả hai chiều

justify-content: center với align-items: center căn giữa một mục theo cả hai hướng bất kể flex-direction, là tổ hợp duy nhất đáng để ghi nhớ hẳn.