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

Rachel Andrew

Kể từ Chrome 123, bạn có thể sử dụng thuộc tính align-content trong 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 linh hoạt hoặc bố cục dạng lưới. Tuy nhiên, bạn có thể cần cập nhật CSS nếu đã dùng align-content bên ngoài các phương thức bố cục này vì giờ đây, CSS sẽ có hiệu lực.

Browser Support

• 123
• 123
• 125
• 17.4

align-content trong bố cục linh hoạt và bố cục lưới

Có thể bạn đã dùng align-content để căn chỉnh các mục linh hoạt hoặc các đường lưới. Trong bố cục linh hoạt, thuộc tính align-content được dùng trên vùng chứa linh hoạt để căn chỉnh các mục linh hoạt trên trục chéo. Trong ví dụ sau, giá trị của thuộc tính này là space-between, nên thuộc tính này sẽ phân phối khoảng trống có sẵn trong vùng chứa linh hoạt giữa các hàng linh hoạt.

Thuộc tính align-content tạo khoảng cách giữa các hàng của các mục linh hoạt, do vùng chứa linh hoạt có khoảng trố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 một 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ột mục linh hoạt và các hành vi mặc định khác của mục linh hoạt 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 một vùng chứa linh hoạt.

Với align-content có sẵn cho bố cục khối, bạn sẽ có thể căn chỉnh theo chiều dọc mà không cần tạo bố cục linh hoạt để thuộc tính hoạt động. Không cần thêm thuộc tính nào vì mục vẫn là mục dạng khối, thay đổi duy nhất là về căn chỉnh.

Thuộc tính align-content căn giữa tiêu đề theo chiều dọc trong một vùng chứa khối (cần có 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 tra xem bố cục khối có hỗ trợ align-content hay không. Vì align-content đã được hỗ trợ trong một thời gian dài trong bố cục linh hoạt và bố cục dạng lưới, nên việc sử dụng các truy vấn tính năng với @supports sẽ luôn trả về giá trị true. Đây là tình huống tương tự như tình huống xảy ra với thuộc tính gap trong flexbox. Nhóm công tác CSS đang tìm hiểu một giải pháp cho các trường hợp triển khai một phần như thế này.

Kiểm tra các trang web của bạn để tìm những trường hợp căn chỉnh ngoài ý 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 này 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 linh hoạt hoặc vùng chứa lưới, thì thuộc tính này sẽ bắt đầu có hiệu lực kể từ Chrome 123. Tìm CSS để sử dụng align-content và sử dụng phiên bản thử nghiệm để kiểm thử các trang web và ứng dụng của bạn nếu đây có thể là trường hợp của bạn.