align-self

Try it

align-self: stretch;

align-self: center;

align-self: start;

align-self: end;

<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: 200px;
  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ú pháp

/* Giá trị từ khóa */
align-self: auto;
align-self: normal;

/* Căn chỉnh theo vị trí */
/* align-self không nhận giá trị left và right */
align-self: center; /* Đặt mục xung quanh trung tâm */
align-self: start; /* Đặt mục ở đầu */
align-self: end; /* Đặt mục ở cuối */
align-self: self-start; /* Căn chỉnh mục sát đầu */
align-self: self-end; /* Căn chỉnh mục sát cuối */
align-self: flex-start; /* Đặt flex item ở đầu */
align-self: flex-end; /* Đặt flex item ở cuối */
align-self: anchor-center;

/* Căn chỉnh theo đường cơ sở */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Kéo dài các mục có kích thước 'auto' để lấp đầy container */

/* Căn chỉnh tràn */
align-self: safe center;
align-self: unsafe center;

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

Giá trị

auto

Tính toán theo 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 sử dụng:

• Trong bố cục định vị tuyệt đối, từ khóa hoạt động như start trên các hộp định vị tuyệt đối được thay thế, và như stretch trên tất cả các hộp định vị tuyệt đối còn lại.
• Trong vị trí tĩnh của bố cục định vị 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 này dẫn đến hành vi tương tự như stretch, ngoại trừ các hộp có tỷ lệ khung hình hoặc kích thước nội tại, nơi nó hoạt động như start.
• Thuộc tính 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ào cạnh của container 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ào cạnh của container 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 flex item được đặt sát vào cạnh cross-start của dòng.

flex-end

Cạnh lề cross-end của flex item được đặt sát vào cạnh cross-end của dòng.

center

Hộp lề của flex item đượ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, mục đó 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 đường cơ sở đầu tiên hoặc cuối cùng: căn chỉnh đường cơ sở căn chỉnh của tập đường cơ sở đầu tiên hoặc cuối cùng của hộp với đường cơ sở tương ứng trong tập đường cơ sở đầu tiên hoặc cuối cùng được chia sẻ của tất cả các hộp trong nhóm chia sẻ đường cơ sở 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 chéo của mục là auto, kích thước sử dụng được đặt thành chiều dài cần thiết để gần lấp đầy container nhất có thể, tuân theo giới hạn chiều rộng và chiều cao của mục. Nếu mục không có kích thước tự động, giá trị này dự phòng về flex-start, và về self-start hoặc self-end nếu align-content của container là first baseline (hoặc baseline) hoặc last baseline.

anchor-center

Trong trường hợp các phần tử được định vị 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. Xem Căn giữa trên neo sử dụng anchor-center.

safe

Nếu kích thước của mục tràn ra ngoài container căn chỉnh, mục đó thay vào đó sẽ được căn chỉnh như thể chế độ căn chỉnh là start.

unsafe

Bất kể kích thước tương đối của mục và container căn chỉnh, giá trị căn chỉnh đã cho vẫn được tuân theo.

Định nghĩa hình thức

Cú pháp hình thức

align-self = 
  auto                                               |
  <overflow-position>? [ normal | <self-position> ]  |
  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ụ

HTML

<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

CSS

section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}

Kết quả

Đặc tả kỹ thuật

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

Xem thêm

• Các 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
• Căn chỉnh hộp CSS
• align-items
• justify-self
• place-self