Thuộc tính tự biện minh của CSS
Ví dụ
Căn chỉnh một mục lưới ở bên phải ô lưới của nó:
.red
{
display: grid;
justify-self: right;
}
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 justify-self
căn chỉnh một mục lưới trong ô lưới của nó theo hướng nội tuyến.
Đối với các trang bằng tiếng Anh, hướng nội tuyến là từ trái sang phải và hướng khối là hướng xuống dưới.
Để thuộc tính này có bất kỳ hiệu ứng căn chỉnh nào, mục lưới cần có không gian trống xung quanh chính nó theo hướng nội tuyến.
Mẹo: Để căn chỉnh một mục lưới theo hướng khối thay vì hướng nội tuyến, hãy sử dụng thuộc tính align-self
hoặc align-items
.
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.justifySelf="right" Hãy thử nó |
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 | |||||
---|---|---|---|---|---|
justify-self | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
Cú pháp CSS
justify-self: auto|normal|stretch| positional alignment | overflow-alignment | baseline alignment |initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
auto | Default value. Grid container justify-self property value is inherited. | 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 inline-size (width) is not set. | Demo ❯ |
start | Align items at the start in the inline direction | Demo ❯ |
left | Align items to the left | Demo ❯ |
center | Align items to the center | Demo ❯ |
end | Align items at the end in the inline direction | Demo ❯ |
right | Align items to the right | 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ụ
biện minh cho bản thân và biện minh cho các mục
Căn chỉnh được đặt thành 'giữa' từ vùng chứa có thuộc tính 'justify-items' và 'right' trên chính mục lưới có thuộc tính 'justify-self'. Giá trị thuộc tính 'quyền' chiếm ưu thế:
#container
{
display: grid;
justify-items: center;
}
.blue
{
justify-self: right;
}
Hãy tự mình thử »biện minh cho bản thân trên các mục lưới được định vị tuyệt đối
Căn chỉnh được đặt thành 'phải' trên các mục lưới được định vị tuyệt đối:
#container
{
display: grid;
position: relative;
}
.red
{
position: absolute;
justify-self: right;
}
Hãy tự mình thử »chế độ viết
Với giá trị writing-mode
của phần tử bộ chứa lưới được đặt thành rl dọc, hướng nội tuyến hướng xuống dưới. Kết quả là phần đầu của vùng chứa được di chuyển từ bên trái lên trên và phần cuối của vùng chứa được di chuyển từ bên phải xuống dưới:
#container {
display: grid;
writing-mode: vertical-rl;
}
.blue {
justify-self: end;
}
Hãy tự mình thử »phương hướng
Với giá trị thuộc tính direction
của phần tử vùng chứa lưới được đặt thành 'rtl', hướng trong dòng là từ phải sang trái. Kết quả là phần đầu của vùng chứa được di chuyển từ bên trái sang bên phải và phần cuối của vùng chứa được di chuyển từ bên phải sang bên trái:
#container {
display: grid;
direction: rtl;
}
.blue {
justify-self: end;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Lưới CSS
Hướng dẫn CSS: Định vị CSS
Tham khảo CSS: thuộc tính căn chỉnh nội dung
Tham khảo CSS: thuộc tính căn chỉnh các mục
Tham khảo CSS: thuộc tính tự căn chỉnh
Tham chiếu CSS: thuộc tính hướng
Tham chiếu CSS: thuộc tính lưới
Tham khảo CSS: thuộc tính Grid-template-columns
Tham chiếu CSS: thuộc tính vị trí
Tham khảo CSS: thuộc tính chế độ viết