Căn chỉnh đường cơ sở gần đây nhất

Tất cả công cụ trình duyệt phổ biến hiện nay đều hỗ trợ căn chỉnh đường cơ sở gần đây nhất trong lưới CSS và flexbox.

Rachel Andrew

Căn chỉnh bằng từ khoá first và last hiện đã có trong tất cả các công cụ chính. Điều này có nghĩa là chúng ta có thể sử dụng chế độ căn chỉnh đường cơ sở gần đây nhất làm một lựa chọn khác khi căn chỉnh các nhóm mục linh hoạt hoặc dạng lưới.

Căn chỉnh đường cơ sở đầu tiên

Nếu bạn thiết lập giá trị align-items thành baseline, kết quả sẽ là căn chỉnh đường cơ sở đầu tiên. Do đó, đường cơ sở đầu tiên của mục mà bạn đang căn chỉnh (được mô tả là chủ đề căn chỉnh) sẽ khớp với đường cơ sở đầu tiên của các mục khác trong nhóm. Bạn có thể thấy điều này trong ví dụ sau, trong đó 2 mục linh hoạt đầu tiên được căn chỉnh bằng align-items: baseline, để 2 mục này căn chỉnh dọc theo đường cơ sở tạo bởi văn bản lớn hơn. Mục cuối cùng được căn chỉnh với flex-start, do đó căn chỉnh với phần đầu của vùng chứa linh hoạt.

Căn chỉnh đường cơ sở gần đây nhất

Khi căn chỉnh một mục lưới hoặc mục linh hoạt với giá trị last baseline, đường cơ sở cuối cùng của mục đó sẽ khớp với đường cơ sở cuối cùng của nhóm chia sẻ cơ sở chứa mục đó. Ví dụ sau minh hoạ căn chỉnh đường cơ sở gần đây nhất, trong đó mục linh hoạt đầu tiên căn chỉnh với dòng văn bản cuối cùng trong mục lớn hơn. Mục cuối cùng trong nhóm này được căn chỉnh với flex-end, là phần cuối của vùng chứa linh hoạt.

Căn chỉnh dự phòng

Nếu chủ thể căn chỉnh không có nhóm chia sẻ cơ sở để căn chỉnh, thì cách căn chỉnh dự phòng sẽ được sử dụng. Đối với baseline và first baseline, cách căn chỉnh dự phòng là start, còn đối với last baseline, cách căn chỉnh dự phòng là end.

Một phần của Loạt chương trình tương tác mới