×

Cách sử dụng align-items - Căn chỉnh phần tử trong Flexbox/Grid

Avatar of admin
admin 0 Views

Tìm Hiểu Về align-items Trong Flexbox và Grid

Sử dụng align-items trong CSS để căn chỉnh phần tử trong Flexbox và Grid là một kỹ thuật quan trọng giúp bạn tạo ra các bố cục web đẹp mắt và linh hoạt. Trong bài viết này, chúng ta sẽ xem xét cách sử dụng thuộc tính này trong cả hai hệ thống bố cục phổ biến: Flexbox và Grid.

Sử Dụng align-items Trong Flexbox

Flexbox là một mô hình bố cục một chiều, giúp dễ dàng căn chỉnh các phần tử con dọc và ngang trong khung chứa (container). Thuộc tính align-items căn chỉnh các phần tử con dọc theo trục chính của khung chứa.

Cú pháp:

.container {
  display: flex;
  align-items: <value>;
}

Giá trị của align-items:

  • stretch: Giá trị mặc định. Phần tử sẽ được kéo dãn để lấp đầy chiều cao của khung chứa.
  • flex-start: Căn chỉnh phần tử của flex từ đầu trục chính.
  • flex-end: Căn chỉnh phần tử của flex từ cuối trục chính.
  • center: Căn chỉnh phần tử ở giữa trục chính.
  • baseline: Căn chỉnh phần tử theo dòng cơ sở của chúng.

Ví dụ:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  align-items: center; /* Căn giữa phần tử dọc theo trục chính */
}

.item {
  background: lightblue;
  padding: 20px;
  margin: 5px;
}

Sử Dụng align-items Trong Grid

CSS Grid là một mô hình bố cục hai chiều, hỗ trợ căn chỉnh phần tử dọc theo cả hai chiều (hàng và cột). Thuộc tính align-items căn chỉnh các phần tử con dọc theo trục chính của hàng trong khung chứa.

Cú pháp:

.container {
  display: grid;
  align-items: <value>;
}

Giá trị của align-items:

  • stretch: Kéo dãn phần tử để lấp đầy chiều cao của khung chứa.
  • start: Căn chỉnh phần tử từ đầu trục chính.
  • end: Căn chỉnh phần tử từ cuối trục chính.
  • center: Căn chỉnh phần tử ở giữa trục chính.

Ví dụ:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start; /* Căn chỉnh phần tử từ đầu trục chính */
}

.item {
  background: lightgreen;
  padding: 20px;
  margin: 5px;
}

Các Trường Hợp Sử Dụng align-items

  1. Căn Chỉnh Các Phần Tử Ngang:

    • Khi bạn có các phần tử cùng chiều cao nhưng muốn căn chỉnh chúng từ đầu, cuối hay giữa khung chứa.

  2. Trong Hệ Thống Menu:

    • Dùng để căn chỉnh các mục trong menu dọc hoặc ngang để tạo sự nhất quán và dễ nhìn.

  3. Trong Bố Cục Form:

    • Có thể được sử dụng để bố trí các nhãn (label) và các trường nhập liệu (input) trên cùng một dòng hoặc cột.

  4. Căn Chỉnh Hình Ảnh:

    • Sử dụng align-items để đảm bảo hình ảnh và nội dung văn bản nằm ở vị trí mong muốn trong cùng một khung chứa.

Kết Luận

Sử dụng align-items là một kỹ thuật CSS mạnh mẽ giúp bạn kiểm soát vị trí của các phần tử trong cả Flexbox lẫn Grid. Hiểu rõ cách hoạt động và áp dụng linh hoạt của thuộc tính này sẽ giúp bạn tạo ra các bố cục web trực quan và hài hòa hơn. Hy vọng bài viết này cung cấp thông tin hữu ích cho bạn trong việc xây dựng giao diện web.

Comments

Bài viết liên quan