Flexbox nhận hành vi mới cho các thành phần con có vị trí tuyệt đối

Joe Medley
Joe Medley

Phiên bản trước của Thông số kỹ thuật về bố cục linh hoạt CSS đặt vị trí tĩnh của các thành phần con có vị trí tuyệt đối vì đó là một mục linh hoạt có kích thước là 0px x 0px. Phiên bản mới nhất của quy cách đã đưa các giá trị này hoàn toàn ra khỏi quy trình và đặt vị trí tĩnh dựa trên các thuộc tính căn chỉnh và căn chỉnh. Tại thời điểm viết bài viết này, Edge và Opera 39 cho máy tính và Android đã hỗ trợ tính năng này.

Ví dụ: hãy áp dụng một số hành vi định vị cho HTML sau.

<div class="container">
    <div>
    <p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
    </div>
</div>

Chúng ta sẽ thêm nội dung như sau:

.container {  
    display: flex;  
    align-items: center;  
    justify-content: center;   
}  
.container > * {  
    position: absolute;  
}

Trong Chrome 52 trở lên, <div> được lồng sẽ nằm giữa hoàn toàn trong vùng chứa <div>.

Hành vi trên Chrome52.

Trong các trình duyệt không phù hợp, góc trên cùng bên trái của hộp màu xanh lục sẽ nằm ở chính giữa trên cùng của hộp màu đỏ.

Hành vi hợp pháp.

Nếu bạn muốn tự mình thử nghiệm cách này trong Chrome hoặc bất kỳ trình duyệt nào khác, hãy tải mẫu của chúng tôi xuống hoặc truy cập bản minh hoạ trực tiếp.