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