place-self

Try it

place-self: stretch center;

place-self: center start;

place-self: start end;

place-self: end center;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 220px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Các thuộc tính thành phần

Thuộc tính này là viết tắt cho các thuộc tính CSS sau:

• align-self
• justify-self

Cú pháp

/* Căn chỉnh theo vị trí */
place-self: auto center;
place-self: normal start;
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: anchor-center;

/* Căn chỉnh theo baseline */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

/* Giá trị toàn cục */
place-self: inherit;
place-self: initial;
place-self: revert;
place-self: revert-layer;
place-self: unset;

Các giá trị

auto

Tính toán thành giá trị align-items của phần tử cha.

normal

Hiệu ứng của từ khóa này phụ thuộc vào chế độ bố cục đang dùng:

• Trong bố cục có vị trí tuyệt đối, từ khóa hoạt động như start trên các hộp có vị trí tuyệt đối được thay thế, và như stretch trên tất cả các hộp có vị trí tuyệt đối khác.
• Ở vị trí tĩnh của bố cục có vị trí tuyệt đối, từ khóa hoạt động như stretch.
• Đối với các mục flex, từ khóa hoạt động như stretch.
• Đối với các mục grid, từ khóa dẫn đến hành vi tương tự như stretch, ngoại trừ các hộp có aspect ratio hoặc kích thước nội tại thì hoạt động như start.
• Thuộc tính này không áp dụng cho các hộp cấp khối và ô bảng.

self-start

Căn chỉnh các mục sát với cạnh của vùng chứa căn chỉnh tương ứng với phía bắt đầu của mục trên trục chéo.

self-end

Căn chỉnh các mục sát với cạnh của vùng chứa căn chỉnh tương ứng với phía kết thúc của mục trên trục chéo.

flex-start

Cạnh lề cross-start của mục flex được sát với cạnh cross-start của dòng.

flex-end

Cạnh lề cross-end của mục flex được sát với cạnh cross-end của dòng.

center

Hộp lề của mục flex được căn giữa trong dòng trên trục chéo. Nếu kích thước chéo của mục lớn hơn flex container, nó sẽ tràn đều theo cả hai hướng.

baseline, first baseline. last baseline

Xác định sự tham gia vào căn chỉnh baseline đầu tiên hoặc cuối cùng: căn chỉnh baseline căn chỉnh của baseline đầu tiên hoặc cuối cùng của hộp với baseline tương ứng trong tập baseline đầu tiên hoặc cuối cùng chia sẻ của tất cả các hộp trong nhóm chia sẻ baseline của nó. Căn chỉnh dự phòng cho first baseline là start, cho last baseline là end.

stretch

Nếu kích thước kết hợp của các mục theo trục chéo nhỏ hơn kích thước của vùng chứa căn chỉnh và mục có kích thước auto, kích thước của nó được tăng đều nhau (không theo tỉ lệ), trong khi vẫn tôn trọng các ràng buộc áp đặt bởi max-height/max-width (hoặc chức năng tương đương), để kích thước kết hợp của tất cả các mục có kích thước auto lấp đầy hoàn toàn vùng chứa căn chỉnh theo trục chéo.

anchor-center

Trong trường hợp các phần tử có vị trí neo, căn chỉnh mục vào trung tâm của phần tử neo liên kết theo hướng khối và nội tuyến. Xem Căn giữa trên neo bằng anchor-center.

Định nghĩa chính thức

Cú pháp chính thức

place-self = 
  <'align-self'> <'justify-self'>?  

<align-self> = 
  auto                                               |
  <overflow-position>? [ normal | <self-position> ]  |
  stretch                                            |
  <baseline-position>                                |
  anchor-center                                      

<justify-self> = 
  auto                                                |
  <overflow-position>? [ normal | <self-position> | left | right ]  |
  stretch                                             |
  <baseline-position>                                 |
  anchor-center                                       

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end    

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

Ví dụ

Minh họa cơ bản

Trong ví dụ sau, chúng ta có bố cục grid 2 x 2. Ban đầu grid container có giá trị justify-items và align-items là stretch — mặc định — khiến các mục grid kéo dài trên toàn bộ chiều rộng của ô.

Mục grid thứ hai, thứ ba và thứ tư được gán các giá trị place-self khác nhau, để minh họa cách những giá trị này ghi đè các vị trí mặc định. Các giá trị này khiến các mục grid chỉ rộng/cao bằng chiều rộng/chiều cao nội dung, và căn chỉnh ở các vị trí khác nhau trong ô, theo hướng khối và hướng nội tuyến.

HTML

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
</article>

CSS

html {
  font-family: "Helvetica", "Arial", sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
}

span:nth-child(2) {
  place-self: start center;
}

span:nth-child(3) {
  place-self: center start;
}

span:nth-child(4) {
  place-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• align-self
• justify-self
• Khái niệm cơ bản về flexbox
• Căn chỉnh các mục trong flex container
• Căn chỉnh hộp trong bố cục grid
• Mô-đun Căn chỉnh hộp CSS