Thuộc tính align-items trong CSS
Bùi Tấn Lực - 922
- 13/10/2025
Chức năng của Thuộc tính align-items trong CSS
Thuộc tính align-items trong CSS dùng để canh chỉnh các phần tử con theo chiều dọc so với phần tử HTML cha, thuộc tính này kết hợp với giá trị flex trong thuộc tính display.
Cú pháp của Thuộc tính align-items trong CSS
align-items: giatri;
giatri: Giá trị để canh chỉnh các phần tử con theo chiều dọc so với phần tử HTML cha (Ví dụ: center, stretch, flex-start, flex-end, baseline)
Các giá trị của Thuộc tính align-items trong CSS
center: Canh giữa các phần tử html với phần tử HTML cha theo chiều dọc, các phần tử con nằm cùng 1 hàng.
stretch: Đưa chiều cao các phần tử con bằng với chiều cao phần tử HTML cha, các phần tử con nằm cùng 1 hàng.
flex-start: Các phần tử con nằm cùng hàng, các cạnh trên của phần tử con đều nằm sát cạnh trên phần tử cha.
flex-end: Các phần tử con nằm cùng hàng, các cạnh dưới của phần tử con đều nằm sát cạnh dưới phần tử cha.
baseline: Các phần tử con nằm cùng hàng, các cạnh trên của phần tử con đều nằm sát cạnh trên phần tử cha.
Code Thuộc tính align-items trong CSS
align-items: center;
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính align-items trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {border:1px solid red; display: flex;}
div div {border:1px solid blue}
</style>
</head>
<body>
<h1>Code Thuộc tính align-items trong CSS</h1>
<p>Dùng để canh chỉnh các phần tử con theo chiều dọc so với phần tử HTML cha, thuộc tính này kết hợp với giá trị flex trong thuộc tính display:</p>
<div style="align-items: center; margin-bottom:10px; height:100px">
<div style="min-height:30px;">align-items: center;</div>
<div style="min-height:50px;">align-items: center;</div>
<div style="min-height:90px;">align-items: center;</div>
</div>
<div style="align-items: stretch; margin-bottom:10px; height:200px">
<div style="min-height:30px;">align-items: stretch;</div>
<div style="min-height:50px;">align-items: stretch;</div>
<div style="min-height:90px;">align-items: stretch;</div>
</div>
<div style="align-items: flex-start; margin-bottom:10px; height:100px">
<div style="min-height:30px;">align-items: flex-start;</div>
<div style="min-height:50px;">align-items: flex-start;</div>
<div style="min-height:90px;">align-items: flex-start;</div>
</div>
<div style="align-items: flex-end; margin-bottom:10px; height:100px">
<div style="min-height:30px;">align-items: flex-end;</div>
<div style="min-height:50px;">align-items: flex-end;</div>
<div style="min-height:90px;">align-items: flex-end;</div>
</div>
<div style="align-items: baseline; margin-bottom:10px; height:100px">
<div style="min-height:30px;">align-items: baseline;</div>
<div style="min-height:50px;">align-items: baseline;</div>
<div style="min-height:90px;">align-items: baseline;</div>
</div>
</body>
</html>
Cách sử dụng align-items trong CSS thực tế
align-items phát huy hiệu quả rõ nhất khi được áp dụng vào các thành phần giao diện cần căn chỉnh đồng nhất. Thay vì thiết lập khoảng cách thủ công cho từng phần tử, thuộc tính này giúp kiểm soát vị trí của các phần tử con trên trục vuông góc với trục chính của flex container.
Căn giữa nội dung trong khối bằng align-items
Một trường hợp thường gặp là căn nội dung nằm giữa một khu vực có chiều cao cố định. Khi phần tử cha sử dụng display: flex, có thể dùng align-items: center để đưa các phần tử con về giữa theo trục vuông góc.
.box {
display: flex;
align-items: center;
height: 120px;
}
Cách này phù hợp với nhiều thành phần như nút bấm, khu vực tiêu đề, thanh điều hướng hoặc một nhóm nội dung cần giữ vị trí cân đối. Khi chiều cao thay đổi, phần tử con vẫn được căn theo đúng vị trí thay vì phải điều chỉnh lại bằng margin hoặc khoảng cách cố định.
Căn chỉnh các phần tử có chiều cao khác nhau
Khi một hàng chứa nhiều phần tử có kích thước không giống nhau, align-items giúp xác định cách chúng được sắp xếp trên trục vuông góc. Đây là cách hữu ích để tạo bố cục cân bằng mà không cần đặt vị trí riêng cho từng phần tử.
.list {
display: flex;
align-items: center;
gap: 20px;
}
Ví dụ, một khu vực có thể chứa biểu tượng, tiêu đề và đoạn mô tả với chiều cao khác nhau. Giá trị center giúp các thành phần được căn giữa tương đối, tạo cảm giác thống nhất hơn trong giao diện.
Kết hợp align-items với flex-direction
align-items không phải lúc nào cũng dùng để căn theo chiều dọc. Vị trí mà nó tác động phụ thuộc vào hướng của flex-direction. Khi hướng flex thay đổi, trục chính và trục vuông góc cũng thay đổi theo.
.box {
display: flex;
flex-direction: row;
align-items: center;
}
Với flex-direction: row, các phần tử được sắp xếp theo chiều ngang nên align-items tác động trên trục dọc. Nếu chuyển sang flex-direction: column, trục chính trở thành chiều dọc và align-items sẽ tác động theo chiều ngang.
.box {
display: flex;
flex-direction: column;
align-items: center;
}
Vì vậy, khi kết quả căn chỉnh không giống mong muốn, nên kiểm tra flex-direction trước khi thay đổi các giá trị khoảng cách. Hiểu được mối quan hệ giữa hai thuộc tính sẽ giúp xử lý bố cục flex chính xác và dễ bảo trì hơn.
Ứng dụng align-items khi xây dựng giao diện responsive
Trong giao diện responsive, kích thước và hướng hiển thị của các thành phần có thể thay đổi theo màn hình. align-items giúp duy trì cách căn chỉnh nhất quán mà không phải viết quá nhiều quy tắc vị trí cho từng kích thước thiết bị.
.menu {
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.menu {
flex-direction: column;
align-items: center;
}
}
Khi chuyển từ bố cục ngang sang dọc, việc thiết lập lại align-items giúp các thành phần tiếp tục nằm đúng vị trí trong không gian mới. Cách này đặc biệt hữu ích với menu, nhóm nút, khu vực thông tin và các khối giao diện có nhiều thành phần.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính align-items trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
