Kể từ Chrome 123, bạn có thể sử dụng thuộc tính align-content
từ tính năng Căn chỉnh hộp CSS trên bố cục khối và bảng. Điều này sẽ cho phép căn chỉnh hướng khối mà không cần tạo bố cục flex hoặc lưới. Tuy nhiên, bạn có thể cần cập nhật CSS nếu đã sử dụng align-content
bên ngoài các phương thức bố cục này vì CSS sẽ có hiệu lực ngay.
Browser Support
align-content
trong bố cục flex và lưới
Có thể bạn đã sử dụng align-content
để căn chỉnh các mục flex hoặc kênh lưới. Trong bố cục flex, thuộc tính align-content
được dùng trên vùng chứa flex để căn chỉnh các mục flex trên trục chéo. Trong ví dụ sau, thuộc tính này có giá trị là space-between
, vì vậy, thuộc tính này sẽ phân phối không gian có sẵn trong vùng chứa flex giữa các hàng flex.
align-content
tạo khoảng trống giữa các hàng của các mục flex, do vùng chứa flex có khoảng trống dự phòng ở trục chéo.Căn giữa một mục theo chiều dọc
align-content
đặc biệt hữu ích khi căn giữa một mục theo chiều dọc trong vùng chứa. Để đạt được mục đích này, hãy sử dụng display: flex
cùng với align-content: center
. Điều này khiến mục trở thành mục flex và các hành vi mặc định khác của mục flex cũng có hiệu lực. Trong ví dụ sau, tiêu đề được căn giữa theo chiều dọc bằng align-content: center
, điều này khiến mục thu nhỏ để vừa với nội dung, do đó, bạn cần áp dụng flex-grow: 1
cho mục đó.
align-content
căn giữa tiêu đề theo chiều dọc trong vùng chứa flex.Với align-content
có sẵn cho bố cục khối, bạn sẽ có thể đạt được căn chỉnh theo chiều dọc mà không cần tạo bố cục flex để thuộc tính hoạt động. Bạn không cần thêm thuộc tính nào vì mục này vẫn là mục khối, chỉ có thay đổi về căn chỉnh.
align-content
đặt tiêu đề ở giữa theo chiều dọc trong vùng chứa khối (cần Chrome
123 hoặc Safari 17.4 trở lên).Kiểm thử khả năng hỗ trợ align-content
trong bố cục khối
Rất tiếc, bạn không thể kiểm thử khả năng hỗ trợ align-content
trong bố cục khối. Vì align-content
đã được hỗ trợ trong một thời gian dài trong bố cục flex và lưới, nên việc sử dụng truy vấn tính năng với @supports
sẽ luôn trả về true. Đây cũng là trường hợp xảy ra với thuộc tính gap
trong flexbox. Nhóm làm việc CSS đang tìm hiểu giải pháp cho các phương thức triển khai một phần như thế này.
Kiểm tra trang web của bạn để tìm sự căn chỉnh không mong muốn
Thuộc tính align-content
đã được xác định trong nhiều năm trong quy cách là hoạt động trên bố cục khối. Vì không có trình duyệt nào hỗ trợ align-content
bên ngoài các ngữ cảnh này, nên trình duyệt không làm gì cả. Tuy nhiên, nếu bạn đã thêm thuộc tính này vào một thành phần không phải là vùng chứa flex hoặc lưới, thì thuộc tính này sẽ bắt đầu có hiệu lực kể từ Chrome 123. Tìm kiếm CSS để sử dụng align-content
và sử dụng phiên bản thử nghiệm để kiểm thử trang web và ứng dụng của bạn nếu bạn có thể gặp phải trường hợp này.