Các place-itemsbất động sản trong CSS là viết tắt cho align-itemsvà justify-itemstài sản, kết hợp chúng thành một tuyên bố duy nhất.
Cách sử dụng phổ biến là căn giữa theo chiều ngang và dọc với Grid:
.center-inside-of-me ( display: grid; place-items: center; )Các thuộc tính này đã được sử dụng với sự ra đời của các bố cục Flexbox và Grid, nhưng cũng được áp dụng cho:
- Hộp cấp khối
- Hộp được định vị tuyệt đối
- Vị trí tĩnh của các hộp được định vị tuyệt đối
- Ô bảng
Cú pháp
Thuộc tính chấp nhận các giá trị kép, giá trị đầu tiên cho align-itemsvà giá trị thứ hai cho justify-items. Khi làm mới, align-itemscăn chỉnh nội dung theo trục dọc (cột) trong khi justify-itemscăn chỉnh theo trục ngang (hàng).
.item ( display: grid; place-items: start center; )Điều này cũng giống như viết:
.item ( display: grid; align-items: start; justify-items: center; )Nếu chỉ có một giá trị được cung cấp, thì nó sẽ đặt cả hai thuộc tính. Ví dụ, điều này:
.item ( display: grid; place-items: start; )… Cũng giống như cách viết này:
.item ( display: grid; align-items: start; justify-items: start; )Giá trị được chấp nhận
Điều làm cho thuộc tính này trở nên thú vị là nó hoạt động khác nhau dựa trên ngữ cảnh mà nó được sử dụng. Ví dụ, một số giá trị chỉ áp dụng cho Flexbox và sẽ không hoạt động trong cài đặt Lưới. Ngoài ra, một số giá trị áp dụng cho thuộc align-itemstính trong đó những giá trị khác áp dụng cho một justify-itemsbên.
Hơn nữa, bản thân các giá trị có thể được coi là thuộc một số loại liên kết: theo ngữ cảnh, phân bố, vị trí (sẽ trở thành tự vị trí nếu được áp dụng trực tiếp cho phần tử con trong bố cục) và đường cơ sở.
Rachel Andrew có một bảng gian lận Căn chỉnh hộp tuyệt vời giúp minh họa tác dụng của các giá trị.
| Giá trị | Kiểu | Sự miêu tả |
|---|---|---|
auto | Theo ngữ cảnh | Giá trị điều chỉnh tương ứng dựa trên ngữ cảnh của phần tử. Nó sử dụng justify-itemsgiá trị của phần tử cha của phần tử. Nếu không tồn tại cha mẹ hoặc nó được áp dụng cho một phần tử được định vị với absolute, thì giá trị sẽ trở thành normal. |
normal | Theo ngữ cảnh | Thực hiện hành vi mặc định của bối cảnh bố cục nơi nó được áp dụng. • Bố cục cấp khối: start• Định vị tuyệt đối: startcho các phần tử tuyệt đối được thay thế và stretchcho tất cả các phần tử khác• Bố cục bảng: Giá trị bị bỏ qua • Bố cục Flexbox: Giá trị bị bỏ qua • Bố cục lưới :, stretchtrừ khi sử dụng tỷ lệ khung hình hoặc định cỡ nội tại khi nó hoạt động giốngstart |
stretch | Phân phối | Mở rộng phần tử sang cả hai cạnh của vùng chứa theo chiều dọc align-itemsvà theo chiều ngang đối với justify-items. |
start | Vị trí | Tất cả các phần tử được căn chỉnh với nhau ở cạnh bắt đầu (bên trái) của vùng chứa |
end | Vị trí | Tất cả các phần tử được căn chỉnh với nhau ở cạnh cuối (bên phải) của vùng chứa |
center | Vị trí | Các mục được căn chỉnh cạnh nhau về phía tâm của thùng chứa |
left | Vị trí | Các mục được căn chỉnh cạnh nhau về phía bên trái của thùng chứa. Nếu thuộc tính không song song với trục chuẩn trên, phải, dưới, trái thì nó sẽ hoạt động như thế nào end. |
right | Vị trí | Các mục được căn chỉnh cạnh nhau về phía bên phải của thùng chứa. Nếu thuộc tính không song song với trục chuẩn trên, phải, dưới, trái thì nó sẽ hoạt động như thế nào start. |
flex-start | Vị trí | Một giá trị chỉ flexbox (rơi vào start) nơi các mặt hàng được đóng gói về phía mép bắt đầu của hộp đựng. |
flex-end | Vị trí | Giá trị chỉ dành cho flexbox (rơi vào end) nơi các mặt hàng được đóng gói về phía mép cuối của thùng chứa. |
self-start | Tự vị | Cho phép một mục trong bố cục tự căn chỉnh trên cạnh vùng chứa dựa trên mặt bắt đầu của chính nó. Về cơ bản ghi đè giá trị đã đặt trên giá trị gốc. |
self-end | Tự vị | Cho phép một mục trong bố cục tự căn chỉnh trên cạnh vùng chứa dựa trên cạnh kết thúc của chính nó thay vì kế thừa giá trị vị trí của vùng chứa. Về cơ bản ghi đè giá trị đã đặt trên giá trị gốc. |
first baselinelast baseline | Đường cơ sở | Căn chỉnh tất cả các phần tử trong một nhóm (tức là các ô trong một hàng) bằng cách khớp với các đường cơ sở căn chỉnh của chúng. Mặc định là firstif baselineđược sử dụng riêng. |
Hỗ trợ trình duyệt
Thuộc tính này được bao gồm trong đặc tả Mô hình Căn chỉnh Hộp CSS Cấp 3.
Hỗ trợ trình duyệt đã trở nên khá rộng rãi và phần lớn chỉ có thể sử dụng được:
- Edge 79+ (Chuyển đoạn sau Chromium)
- Firefox 45+
- Chrome 59+
- Safari 11+
Người giới thiệu
- CSS Box Alignment Model Level 3 - Đặc tả chính thức nơi thuộc
place-itemstính được xác định ban đầu. - Mạng nhà phát triển Mozilla - Tài liệu của nhóm Mozilla.
- Box Alignment Cheat Sheet - Đề cương của Rachel Andrew là một nguồn tài liệu siêu hữu ích để nắm bắt các thuật ngữ căn chỉnh và định nghĩa của chúng.