Trên Chrome 123, bạn có thể sử dụng thuộc tính align-content của CSS Box Alignment cho 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 lưới. Tuy nhiên, bạn có thể cần cập nhật CSS nếu đã sử dụng align-content ngoài các phương thức bố cục này vì CSS này sẽ có hiệu lực.
Hỗ trợ trình duyệt
- 123
- 123
- 125
- 17,4
align-content ở dạng bố cục linh hoạt và dạng lưới
Bạn có thể đã sử dụng align-content để căn chỉnh các mục linh hoạt hoặc kênh theo 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, thành phần này có giá trị space-between để phân bổ không gian có sẵn trong vùng chứa linh hoạt giữa các hàng linh hoạt.
align-content giãn cách các hàng của các mục linh hoạt, do vùng chứa linh hoạt có không gian dự phòng trong trục chéo.Căn giữa một mục theo chiều dọc
Trong trường hợp 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. Để làm việc 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 linh hoạt và hành vi 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 với align-content: center, mục này sẽ thu nhỏ để vừa với nội dung và 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 một vùng chứa linh hoạt.Khi có sẵn align-content cho bố cục khối, bạn sẽ có thể căn chỉnh 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 này vẫn là một mục trong khối, thay đổi duy nhất là căn chỉnh.
align-content căn giữa tiêu đề 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ợ của align-content trong bố cục khối. Vì align-content đã được hỗ trợ từ lâu ở bố cục linh hoạt và bố cục lưới, nên việc sử dụng truy vấn tính năng với @supports sẽ luôn trả về giá trị true. Trường hợp này tương tự xảy ra với thuộc tính gap trong flexbox. Nhóm hoạt động CSS đang khám phá giải pháp cho những cách triển khai một phần như thế này.
Kiểm tra các trang web của bạn để tìm vị trí 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 bản đặc tả kỹ thuật khi hoạt động trên bố cục khối. Vì không có trình duyệt nào hỗ trợ align-content ngoài những ngữ cảnh này nên trình duyệt này không hỗ trợ gì cả. Tuy nhiên, nếu bạn đã thêm thuộc tính vào một vùng chứa không phải vùng chứa linh hoạt 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 của bạn để sử dụng align-content và sử dụng bản beta để kiểm tra trang web và ứng dụng của bạn nếu đây có thể là trường hợp của bạn.