Thuộc tính CSS justify-self

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

Thuộc tính justify-self đối齐 yếu tố lưới trong ô lưới của nó theo hướng trong dòng.

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

Nếu muốn thuộc tính này có bất kỳ hiệu ứng đối齐 nào, yếu tố lưới cần phải để lại không gian khả dụng xung quanh nó theo hướng trong dòng.

Lưu ý:Nếu muốn đối齐 yếu tố lưới theo hướng khối而不是 hướng trong dòng, hãy sử dụng Thuộc tính align-self hoặc Thuộc tính align-items Thuộc tính.

Xin 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-content

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 align-self

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 position

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

Xin xem thêm:

Mô hình

Ví dụ 1

Đặt yếu tố lưới đối齐 ở bên phải của ô lưới của nó:

.red {
  display: grid;
  justify-self: right;
}

Thử ngay

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

Đặt cách đối齐 tương đối với khung thành 'trung tâm', yếu tố lưới bản thân được thiết lập thành 'đối齐 phả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-self trên yếu tố lưới được định vị tuyệt đối

Đặt cách đối齐 của yếu tố lưới được định vị tuyệt đối thành 'right':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

Thử ngay

Ví dụ 4: writing-mode

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

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Thử ngay

Ví dụ 5: direction

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

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Thử ngay

Ngôn ngữ CSS

justify-self: auto|normal|stretch|đối齐 vị trí|overflow-alignment|Đối齐 đường cơ bản|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Giá trị mặc định. Kế thừa giá trị thuộc tính justify-self của bộ chứa lưới.
normal

Điều này phụ thuộc vào ngữ cảnh布局, nhưng tương tự như khi không thiết lập size, mục lưới trong布局 lưới.

Nếu đã thiết lập size, thì hành vi của giá trị thuộc tính tương tự như 'start'.
stretch Nếu không thiết lập inline-size (chiều rộng), thì sẽ kéo dài để lấp đầy ô lưới.
start Đối齐 mục ở đầu hướng nội.
left Đặt mục đối齐 sang trái.
center Đặt mục đối齐 vào giữa.
end Đối齐 mục ở cuối hướng nội.
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.
Đối齐 đường cơ bản Phần tử đối齐 với đường cơ bản 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 Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

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

Hỗ trợ trình duyệt

Số trong bảng chỉ ra 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