Trong ví dụ bên dưới, tất cả các trình duyệt có khả năng flexbox ổn định sẽ hiển thị chính xác trang.Flexbox "align-items: center" không hoạt động trên Chrome beta
Xem jsfiddle here.
Do align-items: center;
ba khối màu được phân bố đều trong section
yếu tố:
Tuy nhiên, trên mới nhất của Chrome Beta (54) và (55) phiên bản Canary, ví dụ tương tự được kết xuất như thế này:
đây sẽ là hành vi dự kiến cho align-items
trong các phiên bản tiếp theo o f Chrome? Hoặc là này một lỗi ...
CẬP NHẬT
Michael_B's answer xóa nên sự khác biệt giữa align-items
và align-content
trong cách bố trí đặc biệt này. jsfiddle nên được sử dụng để kiểm tra bố cục.
Tuy nhiên, ngay cả với tài sản flexbox đúng, Chrome beta và Canary không render bố trí đường đi họ sẽ:
'align-items' được cho là sắp xếp các mục trong một hàng duy nhất của các mục (do đó tên). Để căn giữa nhiều dòng (tất cả nội dung), sử dụng 'align-content: center;'. – Paul
'align-content: center;' sửa lỗi vấn đề định tâm dọc, nhưng các phần tử sẽ không được phân phối đồng đều theo cách này. – DeanAlexRainier
Đúng, tôi nghĩ câu hỏi sẽ là về các dòng đang ở trên đầu thay vì ở giữa.Bạn đã thử 'align-content: space-around;'? Điều đó có cung cấp cho bạn kết quả mong đợi không? – Paul