Để căn chỉnh các mục của một vùng chứa linh hoạt dọc theo trục chính của nó bằng cách phân phối không gian xung quanh nó, chúng tôi sử dụng thuộc tính justify-content của CSS.
Cú pháp
Cú pháp của thuộc tính justify-content CSS như sau -
Selector {
display: flex;
justify-content: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính justify-content của CSS.
<!DOCTYPE html>
<html>
<head>
<style>
#root {
margin: 5%;
display: flex;
justify-content: space-between;
}
#one {
float:left;
box-shadow: inset 0 0 34px #b798e1;
}
#two {
box-shadow: inset 0 0 34px #236fa0;
}
#three {
box-shadow: inset 0 0 34px #43946a;
}
.element {
padding: 7%;
border-radius: 15%;
}
</style>
</head>
<body>
<div id="root">
<div class="element" id="one">1</div>
<div class="element" id="two">2</div>
<div class="element" id="three">3</div>
</div>
</body>
</html> Điều này cho kết quả sau
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#root {
margin: 5%;
padding: 2%;
display: flex;
justify-content: space-evenly;
box-shadow: inset 0 10px 40px magenta;
font-weight: bold;
}
div > div {
padding: 2%;
border-radius: 15%;
}
div:nth-of-type(even) {
box-shadow: inset 2px 2px 20px orange;
}
div > div:nth-of-type(odd) {
box-shadow: inset 2px 2px 20px lightblue;
}
</style>
</head>
<body>
<div id="root">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html> Điều này cho kết quả sau
