Thuộc tính các mục biện minh trong CSS
Ví dụ
Căn chỉnh từng mục lưới ở cuối ô lưới của chúng, theo hướng nội tuyến:
#container
{
display: grid;
justify-items: 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 justify-items
được đặt trên vùng chứa lưới để căn chỉnh các phần tử con (mục lưới) 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, các mục lưới cần có khoảng trống xung quanh chúng theo hướng nội tuyến.
Mẹo: Để căn chỉnh các 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-items
.
Giá trị mặc định: | di sản |
---|---|
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: | đối tượng .style.justifyItems="center" 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-items | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
Cú pháp CSS
justify-items: legacy|normal|stretch| positional alignment | overflow-alignment | baseline alignment |initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
legacy | Default value. Grid items with justify-self value 'auto' only inherits grid container justify-items property value if it starts with 'legacy'. It exists to implement the legacy alignment behavior of HTML's 〈center〉 element and align attribute. | Demo ❯ |
normal | Dependant on layout context, but similar to 'stretch' for grid layout | 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-mục so với biện minh-tự
Căn chỉnh được đặt thành 'giữa' từ vùng chứa và 'phải' trên chính mục lưới. 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 các mục 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;
justify-items: right;
}
.blue
{
position: absolute;
}
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 {
justify-items: end;
writing-mode: vertical-rl;
}
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 {
justify-items: start;
direction: rtl;
}
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 các mục
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 khảo CSS: thuộc tính justify-self
Tham chiếu CSS: thuộc tính vị trí
Tham khảo CSS: thuộc tính chế độ viết