CSSjustify-content căn theo trục chính, align-items căn theo trục phụ.
Trục nào là chính do flex-direction quyết định.
css
.row {
display: flex;
flex-direction: row; /* trục chính = ngang */
justify-content: space-between; /* dàn ngang */
align-items: center; /* căn giữa theo chiều dọc */
}
.col {
display: flex;
flex-direction: column; /* trục chính = DỌC — hai thuộc tính ĐỔI VAI */
justify-content: center; /* giờ căn giữa theo chiều DỌC */
align-items: stretch; /* giờ kéo giãn theo chiều NGANG */
}justify-content | align-items | |
|---|---|---|
| Trục | chính | phụ |
| Giá trị riêng | space-between, space-around, space-evenly | stretch, baseline |
| Chung | flex-start, center, flex-end |
Căn giữa hoàn toàn — cách ngắn nhất:
css
.center { display: flex; justify-content: center; align-items: center; }
/* hoặc: display: grid; place-items: center; */Lưu ý: đổi flex-direction: column thì align-items: center không còn căn giữa theo chiều dọc. Hai thuộc tính này bám theo trục, không bám theo "ngang/dọc".
Lưu ý: justify-* luôn đi với trục chính, align-* luôn đi với trục phụ — quy ước này giữ nguyên cả trong CSS Grid.