Thuộc tính CSS place-self
Ví dụ
Căn chỉnh một mục lưới riêng lẻ ở cuối khối và chỉ dẫn nội tuyến:
#myDiv {
place-self: end;
}
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-self
được sử dụng để căn chỉnh các mục lưới riêng lẻ 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-self có hai giá trị:
- place-self: bắt đầu ở giữa;
- giá trị thuộc tính căn chỉnh của bản thân là 'bắt đầu'
- giá trị thuộc tính của just-self là 'trung tâm'
Nếu thuộc tính place-self có một giá trị:
- place-self: kết thúc;
- Các giá trị thuộc tính căn chỉnh và tự biện minh đều là 'kết thúc'
Giá trị mặc định: | tự độ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.placeSelf="cuối đoạn" Hãy 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-self | 59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
Cú pháp CSS
place-self: auto| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default. The element's default place-self value. | Demo ❯ |
normal | Dependant on layout context, but similar to 'stretch' for grid layout for grid items when size is not set. If size is set, the property value behaves lik 'start'. | Demo ❯ |
stretch | Stretches to fill the grid cell if size is not set. | Demo ❯ |
start | Align items at the start in the inline and block directions | Demo ❯ |
left | Align items to the left in the inline direction, as the justify-self property value. | Demo ❯ |
center | Align items to the center | Demo ❯ |
end | Align items at the end in the inline and block directions | Demo ❯ |
right | Align items to the right in the inline direction, as the justify-self property value. | Demo ❯ |
overflow-alignment |
|
|
baseline alignment | The element is aligned with the baseline of the parent. | 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 phần tử <div> được đặt thành 'vertical-rl', phần cuối của ô lưới theo hướng khối được di chuyển từ dưới lên bên trái và phần cuối của ô lưới theo hướng nội tuyến là đã di chuyển từ phải xuống dưới:
#contianer {
display: grid;
writing-mode: vertical-rl;
}
#myDiv {
place-self: end;
}
Hãy tự mình thử »Flexbox
Thuộc tính place-self
cũng có thể được sử dụng cho các mục flexbox, nhưng giá trị thứ hai cho justify-self
sẽ bị bỏ qua vì nó không áp dụng được với flexbox:
#contianer {
display: flex;
}
#myDiv {
place-self: end stretch;
}
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-self: Thuộc tính CSS Align-self
Thuộc tính justify-self của CSS: Thuộc tính justify-self của CSS
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS