<display-legacy>
CSS 2 sử dụng cú pháp từ khóa đơn cho thuộc tính display, yêu cầu các từ khóa riêng biệt cho các biến thể cấp khối và cấp nội tuyến của cùng một chế độ bố cục. Trang này trình bày chi tiết những giá trị đó.
Cú pháp
Các giá trị <display-legacy> hợp lệ:
inline-block-
Phần tử tạo ra một hộp phần tử khối sẽ được bố trí cùng với nội dung xung quanh như thể nó là một hộp nội tuyến đơn (hoạt động tương tự như một phần tử thay thế).
Tương đương với
inline flow-root. inline-table-
Giá trị
inline-tablekhông có ánh xạ trực tiếp trong HTML. Nó hoạt động như một phần tử HTML<table>, nhưng là một hộp nội tuyến, thay vì một hộp cấp khối. Bên trong hộp bảng là một ngữ cảnh cấp khối.Tương đương với
inline table. inline-flex-
Phần tử hoạt động như một phần tử nội tuyến và bố cục nội dung của nó theo mô hình flexbox.
Tương đương với
inline flex. inline-grid-
Phần tử hoạt động như một phần tử nội tuyến và bố cục nội dung của nó theo mô hình grid.
Tương đương với
inline grid.
Cú pháp chính thức
<display-legacy> =
inline-block |
inline-table |
inline-flex |
inline-grid
Ví dụ
Trong ví dụ dưới đây, chúng ta đang tạo một flex container nội tuyến với từ khóa kế thừa inline-flex.
HTML
<div class="container">
<div>Flex Item</div>
<div>Flex Item</div>
</div>
Not a flex item
CSS
.container {
display: inline-flex;
}
Kết quả
Trong cú pháp mới, flex container nội tuyến sẽ được tạo bằng hai giá trị, inline cho kiểu hiển thị bên ngoài và flex cho kiểu hiển thị bên trong.
.container {
display: inline flex;
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Display Module Level 3 # typedef-display-legacy |