Thuộc tính justify-content trong CSS
Bùi Tấn Lực - 926
- 12/10/2025
Chức năng của Thuộc tính justify-content trong CSS
Thuộc tính justify-content trong CSS dùng để canh các phần tử con trong phần tử cha, có thể canh đều, canh trái, canh phải cho các phần tử con, 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 justify-content trong CSS
justify-content: giatri;
giatri: Giá trị dùng để canh các phần tử con trong phần tử cha (Ví dụ: flex-start, center, flex-end, space-between, space-around, space-evenly)
Các giá trị của Thuộc tính justify-content trong CSS
flex-start: Canh các phần tủ con về bên trái.
center: Canh các phần tử con ra giữa.
flex-end: Canh các phần tử về cuối cùng.
space-between: Canh các phần tử con ra 2 bên góc và giữa, khoảng cách giữa các phần tử bằng nhau.
space-around: Khoảng trống xung quanh mỗi phần tử bằng nhau, khoảng trống ở đầu và cuối sẽ bằng nữa khoảng trống ở giữa, khoảng cách ở giữa của mỗi phần tử bằng nhau
space-evenly: Canh đều khoảng cách giữa các phần tử và cả cạnh 2 bên của phần tử cha, khoảng trống 2 bên và ở giữa đều bằng nhau.
Code Thuộc tính justify-content trong CSS
justify-content: flex-start; Canh các phần tủ con về bên trái
justify-content: center; Canh các phần tử con ra giữa
justify-content: flex-end; Canh các phần tử về cuối cùng
justify-content: space-between;
Canh các phần tử con ra 2 bên góc và giữa, khoảng cách giữa các phần tử bằng nhau
justify-content: space-around;
Khoảng trống xung quanh mỗi phần tử bằng nhau, khoảng trống ở đầu và cuối sẽ bằng nữa khoảng trống ở giữa, khoảng cách ở giữa của mỗi phần tử bằng nhau
justify-content: space-evenly;
Canh đều khoảng cách giữa các phần tử và cả cạnh 2 bên của phần tử cha, khoảng trống 2 bên và ở giữa đều bằng nhau
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính justify-content trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; height:auto; float:left; border:1px solid red; margin-bottom: 10px; padding:10px; display: flex;}
span{width:50px; height:50px; float:left; margin:0px; background:green; color:#fff; border:1px solid blue;line-height:50px; text-align:center}
h4{margin-bottom:3px}
</style>
</head>
<body>
<h1>Code Thuộc tính justify-content trong CSS</h1>
<p>Dùng để canh các phần tử con trong phần tử cha, có thể canh đều, canh trái, canh phải cho các phần tử con, thuộc tính này kết hợp với giá trị flex trong thuộc tính display:</p>
<h4>justify-content: flex-start; Canh các phần tủ con về bên trái</h4>
<div style="justify-content: flex-start;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: center; Canh các phần tử con ra giữa</h4>
<div style="justify-content: center;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: flex-end; Canh các phần tử về cuối cùng</h4>
<div style="justify-content: flex-end;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: space-between; Canh các phần tử con ra 2 bên góc và giữa, khoảng cách giữa các phần tử bằng nhau</h4>
<div style="justify-content: space-between;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: space-around; Khoảng trống xung quanh mỗi phần tử bằng nhau, khoảng trống ở đầu và cuối sẽ bằng nữa khoảng trống ở giữa, khoảng cách ở giữa của mỗi phần tử bằng nhau</h4>
<div style="justify-content: space-around;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: space-evenly; Canh đều khoảng cách giữa các phần tử và cả cạnh 2 bên của phần tử cha, khoảng trống 2 bên và ở giữa đều bằng nhau</h4>
<div style="justify-content: space-evenly;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
Cách sử dụng justify-content hiệu quả trong CSS
Để sử dụng justify-content đúng cách, không nên chỉ ghi nhớ tên các giá trị. Quan trọng hơn là xác định hướng phân bố của phần tử, khoảng trống còn lại trong container và mục tiêu bố cục cần đạt được. Khi nắm được ba yếu tố này, việc lựa chọn giá trị phù hợp sẽ nhanh chóng và chính xác hơn.
Khi nào nên dùng từng giá trị của justify-content?
Mỗi giá trị của justify-content phù hợp với một kiểu phân bố không gian khác nhau. Có thể lựa chọn dựa trên mục đích bố cục thay vì thử từng giá trị một cách ngẫu nhiên.
- flex-start: phù hợp khi muốn các phần tử tập trung về điểm bắt đầu của trục chính.
- flex-end: dùng khi cần đẩy toàn bộ nhóm phần tử về phía cuối trục chính.
- center: thích hợp để đặt nhóm phần tử vào giữa container, thường gặp ở thanh điều hướng hoặc nhóm nút.
- space-between: phù hợp khi muốn phần tử đầu và cuối nằm sát hai phía, đồng thời phân phối khoảng trống vào giữa.
- space-around: dùng khi muốn mỗi phần tử có khoảng trống bao quanh tương đối đồng đều.
- space-evenly: phù hợp khi cần khoảng cách giữa các phần tử và khoảng cách tới hai mép container bằng nhau.
Ví dụ, với một thanh menu cần đặt đều các mục trên toàn bộ chiều ngang, space-between thường phù hợp hơn center. Ngược lại, nếu chỉ cần một nhóm nút nằm chính giữa khu vực chứa, center sẽ đơn giản và dễ kiểm soát hơn.
justify-content hoạt động theo hướng nào?
Điểm quan trọng cần nhớ là justify-content không mặc định có nghĩa là căn theo chiều ngang. Thuộc tính này phân bố phần tử theo trục chính (main axis) của container.
Với phần tử có display: flex và flex-direction: row, trục chính chạy theo chiều ngang nên justify-content thường tạo ra hiệu ứng căn trái, phải hoặc giữa theo chiều ngang. Khi chuyển sang flex-direction: column, trục chính chuyển thành chiều dọc và cách phân bố của justify-content cũng thay đổi theo.
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
Trong trường hợp trên, các phần tử được phân bố theo chiều dọc thay vì chiều ngang. Vì vậy, khi kết quả hiển thị không giống mong muốn, hãy kiểm tra flex-direction trước khi thay đổi giá trị của justify-content.
Những lỗi thường gặp khi sử dụng justify-content
Một lỗi phổ biến là đặt justify-content nhưng không thấy bố cục thay đổi. Nguyên nhân thường là container không có không gian trống trên trục chính để phân phối hoặc phần tử chưa được thiết lập bố cục phù hợp.
Với Flexbox, nên kiểm tra display: flex, flex-direction và kích thước của container trước. Nếu các phần tử đã chiếm toàn bộ không gian khả dụng, những giá trị như space-between hoặc space-evenly sẽ không có khoảng trống để tạo ra sự khác biệt rõ rệt.
Một nhầm lẫn khác là sử dụng justify-content để xử lý mọi kiểu căn chỉnh. Trong Flexbox, justify-content phụ trách phân bố theo trục chính, còn align-items thường được dùng để căn các phần tử theo trục chéo. Xác định đúng trục trước khi chọn thuộc tính sẽ giúp tránh việc thêm CSS không cần thiết.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính justify-content 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 *
