Trong Flexbox, Main Axis là trục chính (mặc định ngang), Cross Axis là trục chéo (mặc định dọc). align-items căn chỉnh items theo Cross Axis.
Ví dụ mã nguồn
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.container {
height: 200px;
display: flex;
width: 100%;
align-items: center; /* Căn giữa cross axis (dọc) */
border: 2px solid red;
gap: 20px;
padding: 20px;
}
div {
width: 100px;
height: 100px;
color: white;
text-align: center;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.first { background-color: rgb(55, 0, 255); }
.second { background-color: red; }
.third { background-color: rgb(140, 0, 255); }
</style>
</head>
<body>
<h1>Align Flex Items along Cross Axis</h1>
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
<p>Các item được căn giữa theo chiều dọc (cross axis) nhờ align-items: center</p>
</body>
</html>
Các giá trị align-items
| Giá trị | Mô tả | Hành vi (flex-direction: row) |
|---|---|---|
| stretch (mặc định) | Kéo giãn items full chiều cao container | Height = container height |
| flex-start | Căn đầu cross axis | Căn trên (top) |
| flex-end | Căn cuối cross axis | Căn dưới (bottom) |
| center | Căn giữa cross axis | Căn giữa dọc |
| baseline | Căn theo baseline text | Căn dòng chữ đầu tiên |
Thay đổi flex-direction → Cross Axis đổi
| flex-direction | Main Axis | Cross Axis | align-items: center |
|---|---|---|---|
| row (mặc định) | Ngang (←→) | Dọc (↑↓) | Căn giữa dọc |
| row-reverse | Ngang (→←) | Dọc (↑↓) | Căn giữa dọc |
| column | Dọc (↑↓) | Ngang (←→) | Căn giữa ngang |
| column-reverse | Dọc (↓↑) | Ngang (←→) | Căn giữa ngang |
align-self: Ghi đè cho 1 item riêng
.item-special { align-self: flex-end; } /* Item này căn dưới, các item khác theo align-items của container */
align-content: Căn chỉnh CÁC HÀNG (khi flex-wrap: wrap)
align-items căn item trong hàng, align-content căn các hàng so với nhau (khi có nhiều hàng do wrap).
.container { display: flex; flex-wrap: wrap; height: 400px; align-content: space-between; }