2016-09-12 47 views
5

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ố:

Firefox 48.0

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:

Chrome beta 54

đâ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-itemsalign-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ẽ:

enter image description here

+0

'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

+0

'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

+0

Đú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

Trả lời

2

Cách thích hợp để đạt được bố trí ở trên là với align-content: space-around (demo).

Khi xử lý thùng chứa nhiều đường flex, align-content là thuộc tính để sử dụng.

Từ spec:

8.4. Packing Flex Lines: the align-content property

Thuộc tính align-content gắn dòng một container flex trong container flex khi có thêm không gian trong cross-trục, tương tự như cách justify-content căn chỉnh các mục riêng lẻ trong trục chính .

Lưu ý, thuộc tính này không có hiệu lực đối với vùng chứa đơn lẻ .

Chỉ các thùng chứa nhiều dòng mới có không gian trống trên trục ngang cho các đường thẳng hàng, bởi vì trong một hộp chứa một đường dây đơn lẻ tự động giãn để lấp đầy khoảng trống.

+0

Cảm ơn bạn đã làm rõ giữa 'align-items' và' align-content'. Tôi sẽ chỉnh sửa câu hỏi của mình. Nhưng khi tôi xem ví dụ đã sửa đổi của bạn với 'nội dung phù hợp' trên Chrome beta hoặc Canary, bố cục được hiển thị không chính xác vẫn tồn tại. Bạn có thể xác nhận điều này không? – DeanAlexRainier

+0

Tôi không thể truy cập phiên bản đó trên PC này. Nó hoạt động theo hướng cột? https://jsfiddle.net/v966v6pp/10/ –

+0

Điều đó có hiệu quả. Vì vậy, về cơ bản, đối với một bố trí như thế này, bạn phải giới thiệu một phần tử phụ để chứa các mục nằm ngang. – DeanAlexRainier

Các vấn đề liên quan