Hỗ trợ nội dung căn chỉnh ở bố cục khối và bảng

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

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

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.

Thuộc tính 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 đó.

Thuộc tính 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.

Thuộc tí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.