ในการจัดตำแหน่งรายการของคอนเทนเนอร์แบบยืดหยุ่นตามแกนหลักโดยกระจายพื้นที่รอบๆ เราใช้คุณสมบัติ justify-content ของ CSS
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS justify-content มีดังนี้ -
Selector {
display: flex;
justify-content: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS justify-content
<!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> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
ตัวอย่าง
<!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> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
