Chế độ bố cục

Chế độ bố cục (layout mode), đôi khi gọi là bố cục, là một thuật toán CSS xác định vị trí và kích thước của các hộp phần tử dựa trên cách chúng tương tác với các hộp anh em và hộp tổ tiên của chúng.

Có nhiều chế độ bố cục:

Bố cục luồng hoặc luồng thông thường

Tất cả các phần tử đều là một phần của luồng thông thường cho đến khi bạn làm gì đó để đưa chúng ra khỏi nó. Luồng thông thường bao gồm:

Bố cục block

Được thiết kế để sắp xếp các hộp như đoạn văn.

Bố cục inline

Được thiết kế để sắp xếp các mục inline như văn bản.

Bố cục bảng

Được thiết kế để sắp xếp các bảng.

Bố cục float

Được thiết kế để làm cho một mục tự định vị sang trái hoặc phải với phần còn lại của nội dung trong luồng thông thường bao quanh nó.

Bố cục định vị

Được thiết kế để định vị các phần tử mà không có nhiều tương tác với các phần tử khác.

Bố cục nhiều cột

Được thiết kế để sắp xếp nội dung thành các cột như trong báo.

Bố cục hộp linh hoạt (Flexbox)

Được thiết kế để sắp xếp các trang phức tạp có thể thay đổi kích thước một cách mượt mà.

Bố cục lưới (Grid)

Được thiết kế để sắp xếp các phần tử tương đối theo một lưới cố định.

Note: Không phải tất cả các thuộc tính CSS đều áp dụng cho tất cả các chế độ bố cục. Hầu hết chúng chỉ áp dụng cho một hoặc hai chế độ và không có tác dụng nếu chúng được đặt trên một phần tử tham gia vào chế độ bố cục khác.