Bùi Tấn Lực - 23
- 13/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính align-items trong CSS
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á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
<!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>
<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>
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 *
