Thuộc tính nội dung địa điểm CSS
Ví dụ
Chỉ định các đường flex để căn chỉnh về phía dưới cùng của thùng chứa flex và căn chỉnh các mục flex có cùng khoảng cách giữa chúng theo chiều ngang:
#container {
display: flex;
place-content: end space-between;
}
Hãy tự mình thử »Thêm các 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-content
được sử dụng trong bố cục flexbox và 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-content có hai giá trị:
- địa điểm-nội dung: bắt đầu trung tâm;
- giá trị thuộc tính căn chỉnh nội dung là 'bắt đầu'
- giá trị thuộc tính của nội dung biện minh là 'trung tâm'
Nếu thuộc tính nội dung địa điểm có một giá trị:
- nội dung địa điểm: kết thúc;
- các giá trị thuộc tính căn chỉnh nội dung và nội dung đều là 'kết thúc'
Giá trị mặc định: | 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.placeContent="end space-around" 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-content | 59.0 | 79.0 | 53.0 | 11.0 | 46.0 |
Cú pháp CSS
place-content: normal| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
normal | Default value. Dependant on layout context. The same as setting no property value for align-content and justify-content. | Demo ❯ |
stretch | Grid: Stretches grid items to fill the grid container if size is not set. Flexbox: Stretches flex items on the cross axis to fill the flex container if flex items have no specified size on the cross axis. | Demo ❯ |
start | Align items at the start of the container | Demo ❯ |
end | Align items at the end of the container | Demo ❯ |
center | Align items to the center of the container | Demo ❯ |
space-between | Distribute available extra space evenly between the elements inside the container on both axis. | Demo ❯ |
space-around | Distribute available extra space evenly around each element inside the container on both axis. | Demo ❯ |
space-evenly | Distribute elements inside the container evenly on both axis. | Demo ❯ |
overflow-alignment |
| |
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ụ
Ví dụ với lưới
Không gian bổ sung có sẵn theo hướng khối được phân bổ đều xung quanh mỗi mục lưới và các mục lưới được căn chỉnh vào giữa theo hướng nội tuyến:
#container {
display: grid;
place-content: space-around center;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: CSS flexbox
Hướng dẫn CSS: Lưới CSS
Tham khảo CSS: thuộc tính căn chỉnh nội dung
Tham khảo CSS: thuộc tính biện minh cho nội dung
Tham chiếu DOM HTML: thuộc tính AlignContent