Thuộc tính mục địa điểm CSS
Ví dụ
Đặt mỗi phần tử <div> ở đầu ô lưới của nó theo hướng nội tuyến và hướng khối:
#container {
place-items: start;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính place-items
được sử dụng trong bố cục lưới và là thuộc tính viết tắt cho các thuộc tính sau:
Nếu thuộc tính place-items có hai giá trị:
- địa điểm-mục: trung tâm bắt đầu;
- giá trị thuộc tính căn chỉnh các mục là 'bắt đầu'
- giá trị thuộc tính của các mục biện minh là 'trung tâm'
Nếu thuộc tính place-items có một giá trị:
- địa điểm: kết thúc;
- Giá trị thuộc tính của các mục căn chỉnh và các mục đều đều là 'kết thúc'
Giá trị mặc định: | di sản bình thường |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.placeItems="stretch center" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
place-items | 59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
Cú pháp CSS
place-items: normal legacy| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
normal legacy | Default. The element's default place-items value. The default value for align-items is 'normal', and the default value for justify-items is 'legacy'. | Demo ❯ |
baseline | Items are positioned at the baseline of the container | Demo ❯ |
center | Align items to the center of the grid cell | Demo ❯ |
end | Align items at the end of the grid cell | Demo ❯ |
start | Align items at the start of the grid cell | Demo ❯ |
stretch | Stretches grid items to fill the grid container if the grid item sizes are not set. | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Chế độ viết
Với giá trị writing-mode
của vùng chứa lưới được đặt thành 'vertical-rl', phần cuối theo hướng khối được di chuyển từ dưới lên bên trái và phần cuối theo hướng nội tuyến được di chuyển từ phải xuống dưới:
#container {
place-items: end;
writing-mode: vertical-rl;
}
Hãy tự mình thử »Flexbox
Thuộc tính justify-items
không phù hợp với flexbox. Vì vậy, nếu thuộc tính place-items
được sử dụng trong bố cục flexbox, giá trị cho các mục hợp lý (giá trị thứ hai) sẽ bị bỏ qua.
#wrapper {
place-items: stretch end;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Lưới CSS
Hướng dẫn CSS: CSS flexbox
Thuộc tính CSS Align-items: Thuộc tính CSS Align-items
Thuộc tính justify-items của CSS: Thuộc tính justify-items của CSS
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS