Thuộc tính place-self của CSS

Trang trước place-items
Trang tiếp theo pointer-events

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

place-self Thuộc tính được sử dụng để căn chỉnh mục lưới đơn lẻ, là viết tắt của các thuộc tính sau:

align-self
justify-self

Nếu thuộc tính place-self có hai giá trị:

place-self: start center;

Giá trị của thuộc tính align-self là 'start'
Giá trị của thuộc tính justify-self là 'center'

Nếu thuộc tính place-self chỉ có một giá trị:

place-self: end;

thì giá trị của thuộc tính align-self và justify-self đều là 'end'

Mô hình

Ví dụ 1

Để căn chỉnh một mục lưới đơn lẻ theo hướng khối và hướng hàng trong nội bộ đều đến vị trí kết thúc:

#myDiv {
  place-self: end;
}

Thử nghiệm trực tiếp

Ví dụ 2: Chế độ viết

Khi yếu tố <div> có writing-mode Khi giá trị thuộc tính được thiết lập thành 'vertical-rl', vị trí kết thúc của ô lưới theo hướng khối di chuyển từ dưới lên bên trái, vị trí kết thúc theo hướng hàng trong nội bộ di chuyển từ bên phải xuống dưới:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

Thử nghiệm trực tiếp

Ví dụ 3: Layout 弹性盒

place-self Thuộc tính này cũng có thể được sử dụng cho các phần tử layout 弹性盒, nhưng justify-self Giá trị thứ hai sẽ bị bỏ qua vì nó không áp dụng trong layout 弹性盒.

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

Thử nghiệm trực tiếp

Ngữ pháp CSS

place-self: auto|value|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
auto	Mặc định. Giá trị mặc định của thuộc tính place-self của phần tử.
normal	Điều này phụ thuộc vào ngữ cảnh布局, nhưng đối với các dự án không thiết lập kích thước, hành vi của nó tương tự như 'stretch' trong布局 lưới. Nếu đã thiết lập kích thước, 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 kích thước, sẽ kéo dãn để lấp đầy ô lưới.
start	Căn chỉnh dự án sang đầu trong hướng hàng và hướng khối.
left	Căn chỉnh dự án sang trái trong hướng hàng, làm giá trị của thuộc tính justify-self.
center	Căn chỉnh dự án vào giữa.
end	Căn chỉnh dự án sang cuối trong hướng hàng và hướng khối.
right	Căn chỉnh dự án sang phải trong hướng hàng, làm giá trị của thuộc tính justify-self.
overflow-alignment	'safe': Nếu nội dung tràn ra, đặt vị trí căn chỉnh của dự án thành 'start'. 'unsafe': Dù nội dung của dự án có tràn ra hay không, vẫn giữ giá trị căn chỉnh.
Căn chỉnh cơ sở	Phần tử được căn chỉnh 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	Từ ngữ này kế thừa thuộc tính 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
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ữ pháp JavaScript:	object.style.placeSelf="end stretch"