Bùi Tấn Lực - 23
- 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á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
<!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>
<h4>justify-content: flex-start;</h4>
<div style="justify-content: flex-start;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: center;</h4>
<div style="justify-content: center;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: flex-end;</h4>
<div style="justify-content: flex-end;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: space-between;</h4>
<div style="justify-content: space-between;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: space-around;</h4>
<div style="justify-content: space-around;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h4>justify-content: space-evenly;</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 *
