×

Cách sử dụng align-self - Căn chỉnh từng phần tử riêng lẻ

Avatar of admin
admin 0 Views

Khi làm việc với CSS Flexbox, chúng ta thường muốn kiểm soát cách các phần tử con của một flex container được căn chỉnh. Một trong những thuộc tính quan trọng giúp xác định cách mỗi phần tử con được căn chỉnh theo chiều trục chính (main axis) chính là align-self. Thuộc tính này cho phép chúng ta căn chỉnh từng phần tử con khác biệt nhau, thay vì phải áp dụng cùng một kiểu căn chỉnh cho tất cả các phần tử con trong flex container.

Hiểu về thuộc tính align-self

Thuộc tính align-self cho phép bạn ghi đè cách căn chỉnh trên các phần tử con cá nhân độc lập, bất kể cách chúng được xác định trong align-items của flex container. Điều này rất hữu ích khi bạn cần một hoặc nhiều phần tử được căn chỉnh khác nhau trong cùng một flex container.

Các giá trị mà align-self có thể nhận bao gồm:

  1. auto: Giá trị mặc định. Phần tử sẽ kế thừa giá trị của align-items từ flex container cha.
  2. flex-start: Phần tử được căn chỉnh ở đầu trục chính (main axis).
  3. flex-end: Phần tử được căn chỉnh ở cuối trục chính.
  4. center: Phần tử được căn chỉnh ở giữa trục chính.
  5. baseline: Phần tử được căn chỉnh theo đường gióng văn bản của nó.
  6. stretch: Phần tử sẽ giãn ra để lấp đầy khoảng trống dọc theo trục chính.

Sử dụng align-self trong thực tế

Chúng ta sẽ đi vào một ví dụ cụ thể để hiểu rõ cách sử dụng thuộc tính này.

Ví dụ 1: Căn chỉnh từng phần tử con riêng biệt

Giả sử bạn có một HTML như sau:

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

Với CSS như sau:

.container {
  display: flex;
  height: 300px;
  align-items: center; /* Mặc định là căn giữa */
}

.item1 {
  align-self: flex-start; /* Căn lên đầu */
}

.item2 {
  align-self: flex-end; /* Căn xuống cuối */
}

.item3 {
  align-self: center; /* Căn giữa */
}

Trong ví dụ trên:

  • item1 sẽ được căn lên đầu của container.
  • item2 sẽ được căn xuống cuối của container.
  • item3 sẽ được căn giữa theo chiều dọc của container.

Ví dụ 2: Kết hợp với các giá trị khác

Chúng ta cũng có thể kết hợp align-self với các thuộc tính khác của Flexbox để tạo ra bố cục phức tạp hơn:

<div class="box">
  <div class="element A">Element A</div>
  <div class="element B">Element B</div>
  <div class="element C">Element C</div>
</div>

Và CSS:

.box {
  display: flex;
  flex-direction: column;
  height: 400px;
  align-items: stretch; /* Mặc định là kéo giãn */
}

.element.A {
  align-self: auto; /* Kế thừa thuộc tính từ `align-items` */
}

.element.B {
  align-self: baseline; /* Căn theo đường gióng văn bản */
}

.element.C {
  align-self: flex-end; /* Căn xuống cuối trục chính */
}

Trong trường hợp này:

  • Element A sẽ kéo giãn toàn bộ chiều cao của container.
  • Element B sẽ căn theo đường gióng văn bản của nó.
  • Element C sẽ được căn chỉnh xuống cuối của flex container.

Kết luận

Việc sử dụng thuộc tính align-self trong CSS Flexbox giúp bạn dễ dàng và chính xác hơn trong việc căn chỉnh từng phần tử con trong một flex container. Bằng cách hiểu và áp dụng đúng các giá trị của thuộc tính này, bạn có thể tạo ra bố cục linh hoạt và phức tạp mà không gặp nhiều khó khăn. Hãy thử nghiệm với các giá trị khác nhau và xem cách chúng làm cho bố cục của bạn trở nên độc đáo và thú vị hơn.

Comments

Bài viết liên quan