플렉스 컨테이너의 항목을 주축을 따라 정렬하기 위해 주변에 공간을 분배하기 위해 CSS의 justify-content 속성을 사용합니다.
구문
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> 이것은 다음과 같은 출력을 제공합니다.
