Thuộc tính CSS justify-items

Định nghĩa và cách sử dụng

Thuộc tính justify-items được thiết lập trên khung chứa lưới để đối齐 các phần tử con (phần tử lưới) theo hướng nội bộ.

Đối với trang tiếng Anh, hướng nội bộ là từ trái sang phải, hướng khối là xuống dưới.

Để thuộc tính này có bất kỳ hiệu ứng đối齐 nào, phần tử lưới cần phải để lại không gian trống xung quanh chính nó theo hướng nội bộ.

Lưu ý:Để đối齐 phần tử lưới theo hướng khối thay vì hướng nội bộ, hãy sử dụng Thuộc tính align-items Thuộc tính.

Xem thêm:

Giáo trình CSS:CSS Grid

Giáo trình CSS:Định vị CSS

Tài liệu tham khảo CSS:Thuộc tính align-items

Tài liệu tham khảo CSS:Thuộc tính direction

Tài liệu tham khảo CSS:Thuộc tính grid

Tài liệu tham khảo CSS:Thuộc tính grid-template-columns

Tài liệu tham khảo CSS:Thuộc tính justify-self

Tài liệu tham khảo CSS:Thuộc tính position

Tài liệu tham khảo CSS:Thuộc tính writing-mode

Mô hình

Ví dụ 1

Đặt mỗi phần tử lưới ở cuối đơn vị lưới của nó theo hướng nội bộ:

#container {
  display: grid;
  justify-items: end;
}

Thử ngay

Ví dụ 2: so sánh justify-items và justify-self

Đặt cách đối齐 tương đối với khung chứa thành 'giữa', phần tử lưới本身 được thiết lập thành 'phải đối齐'. Giá trị thuộc tính 'right' chiếm ưu thế:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Thử ngay

Ví dụ 3: Đặt justify-items trên phần tử lưới có định vị tuyệt đối

Đặt cách đối齐 của phần tử lưới có định vị tuyệt đối thành 'phải đối齐':

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Thử ngay

Ví dụ 4: writing-mode

Khi giá trị thuộc tính writing-mode của phần tử chứa lưới được thiết lập thành vertical-rl, hướng nội bộ là xuống dưới. Kết quả là điểm bắt đầu của容器 di chuyển từ bên trái lên trên, điểm cuối của容器 di chuyển từ bên phải xuống dưới:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Thử ngay

Ví dụ 5: direction

Khi giá trị thuộc tính direction của phần tử chứa lưới được thiết lập thành 'rtl', hướng hàng nội bộ là từ phải sang trái. Kết quả là điểm bắt đầu của容器 di chuyển từ bên trái sang bên phải, và điểm cuối của container di chuyển từ bên phải sang bên trái:

#container {
  justify-items: start;
  direction: rtl;
}

Thử ngay

Ngôn ngữ CSS

justify-items: legacy|normal|stretch|position alignment|overflow-alignment|baseline alignment|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
legacy

Giá trị mặc định.

Chỉ khi bắt đầu bằng 'legacy', mục lưới có giá trị justify-self là 'auto' sẽ kế thừa giá trị thuộc tính justify-items của bộ chứa lưới.

Nó tồn tại để thực hiện hành vi đối齐 di sản của thẻ <center> của HTML và thuộc tính align.
normal Điều này phụ thuộc vào ngữ cảnh布局, nhưng tương tự như 'stretch' của layout lưới.
stretch Nếu không thiết lập inline-size (chiều rộng), thì sẽ kéo giãn để lấp đầy ô lưới.
start Đối齐 mục ở đầu hướng hàng.
left Đối齐 mục vào trái.
center Đối齐 mục vào giữa.
end Đối齐 mục ở cuối hướng hàng.
right Đặt mục phải đối齐.
overflow-alignment
  • 'safe' sẽ đặt cách đối齐 của mục thành 'start' nếu nội dung tràn ra.
  • 'unsafe' giữ giá trị đối齐, bất kể nội dung của mục có tràn ra hay không.
baseline-alignment Phần tử đối齐 với cơ sở của phần tử cha.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thuộc tính này được kế thừa từ phần tử cha của nó. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: legacy
Kế thừa: Không
Chế tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Ngôn ngữ lập trình JavaScript: object.style.justifyItems="center"

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0