Thuộc tính HTML DOM justifyContent được sử dụng để căn chỉnh các mục linh hoạt theo chiều ngang trên trục chính khi nó không chiếm hết không gian có sẵn.
Sau đây là cú pháp cho -
Đặt thuộc tính justifyContent -
object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| flex-start | Sắp xếp thứ tự các mục ở đầu vùng chứa và là giá trị mặc định. |
| flex-end | Sắp xếp thứ tự các mục ở cuối vùng chứa. |
| trung tâm | Sắp xếp thứ tự các mục ở tâm vùng chứa. |
| khoảng trắng giữa | Sắp xếp thứ tự các mục có khoảng cách giữa các dòng. |
| space-around | Sắp xếp thứ tự các mục có khoảng cách giữa, trước và sau các dòng. |
| tên ban đầu | Đang xác nhận thuộc tính này về giá trị ban đầu. |
| kế thừa | Kế thừa giá trị thuộc tính mẹ |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính justifyContent -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 400px;
height: 120px;
box-shadow: 0 0 0 5px brown;
display: flex;
flex-wrap: wrap;
}
#demo div {
padding: 0;
width: 50px;
height: 50px;
border: 5px solid;
border-radius: 15%;
}
#demo div:nth-child(even) {
border-color: black;
}
#demo div:nth-child(odd) {
border-color: red;
}
</style>
<script>
function changeJustifyContent() {
document.getElementById("demo").style.justifyContent="space-between";
document.getElementById("Sample").innerHTML="The justify-content property is now set to space between";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>Change the above container justify-content property by clicking the below button</p>
<button onclick="changeJustifyContent()">Change Justify Content</button>
<p id="Sample"></p>
</body> Đầu ra
Khi nhấp vào “ Thay đổi nội dung căn đều Nút ”-
