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

Joe Medley

Phiên bản trước của quy cách bố cục Hộp linh hoạt CSS đã đặt vị trí tĩnh của các phần tử con có vị trí tuyệt đối như thể chúng là một phần tử flex có kích thước là 0px x 0px. Phiên bản mới nhất của thông số kỹ thuật sẽ đưa các thuộc tính này ra khỏi luồng 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 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> lồng nhau sẽ được căn giữa hoàn hảo trong vùng chứa <div>.

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

Nếu bạn muốn tự mình thử nghiệm tính năng 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 vào bản minh hoạ trực tiếp.