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

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

place-content Thuộc tính được sử dụng cho bố cục box co giãn (flexbox) và lưới (grid), là viết tắt của các thuộc tính sau:

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

place-content: start center;
  • giá trị của thuộc tính align-content là 'start'
  • giá trị của thuộc tính justify-content là 'center'

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

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

Mô hình

Ví dụ 1

Đặt độ co giãn ở dưới cùng của khay co giãn, và làm cho khoảng cách giữa các mục co giãn bằng nhau theo hướng ngang:

#container {
  display: flex;
  place-content: end space-between;
}

Thử ngay

Ví dụ 2: Lưới布局

Khoảng trống thêm trên hướng khối được phân phối đều xung quanh mỗi mục lưới, và các mục lưới căn giữa theo hướng hàng:

#container {
  display: grid;
  place-content: space-around center;
}

Thử ngay

Cú pháp CSS

place-content: normal|value|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
normal

Giá trị mặc định. Tuỳ thuộc vào ngữ cảnh布局.

Tương đương với không thiết lập giá trị thuộc tính cho align-content và justify-content.
stretch

Lưới: Nếu không thiết lập kích thước, các mục lưới sẽ kéo dài để lấp đầy khối lưới.

Hộp động: Nếu kích thước của mục động trên trục giao nhau không được chỉ định, nó sẽ kéo dài trên trục giao nhau để lấp đầy khối động.
start Căn chỉnh các mục vào vị trí bắt đầu của khối.
end Căn chỉnh các mục vào vị trí kết thúc của khối.
center Căn chỉnh các mục vào vị trí trung tâm của khối.
space-between Phân phối đều không gian khả dụng trên hai trục của khối, để khoảng cách giữa các mục bằng nhau.
space-around Phân phối đều không gian khả dụng trên hai trục của khối, để mỗi mục xung quanh có khoảng cách bằng nhau.
space-evenly Phân phối đều các mục trên hai trục của khối.
overflow-alignment

'safe': Nếu nội dung tràn,则将项目对齐设置为 'start'.

'unsafe': Dù nội dung của mục có tràn hay không, giá trị căn chỉnh vẫn giữ nguyên.
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: normal
Kế thừa: Không
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
Cú pháp JavaScript: object.style.placeContent="end space-around"

Hỗ trợ trình duyệt

Số trong bảng biểu thị 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
59.0 79.0 53.0 11.0 46.0

Trang liên quan

Hướng dẫn:CSS Lưới

Hướng dẫn:CSS Hộp Động

Tham khảo:Thuộc tính align-content CSS

Tham khảo:Thuộc tính CSS justify-content

Tham khảo:Thuộc tính alignContent của HTML DOM