플렉스(Flex) 컨테이너 안의 항목들을 주축(main axis)을 따라 정렬하고 남는 공간을 분배하려면 CSS의 justify-content 속성을 사용합니다. 이 속성을 활용하면 별도의 float나 position 지정 없이도 요소를 화면 왼쪽, 가운데, 오른쪽에 손쉽게 배치할 수 있습니다.
기본 문법
CSS justify-content 속성의 기본 문법은 다음과 같습니다.
Selector {
display: flex;
justify-content: /*값*/;
}justify-content에 사용할 수 있는 대표적인 값은 다음과 같습니다.
- flex-start: 항목들을 주축의 시작점(왼쪽)에 정렬
- center: 항목들을 가운데 정렬
- flex-end: 항목들을 주축의 끝점(오른쪽)에 정렬
- space-between: 첫 번째와 마지막 항목을 양 끝에 배치하고 나머지 공간을 균등하게 분배
- space-evenly: 모든 항목 사이와 양 끝의 여백을 동일하게 분배
- space-around: 각 항목의 좌우에 동일한 여백을 부여
예제 1: space-between으로 왼쪽·가운데·오른쪽 정렬하기
다음 예제는 justify-content: space-between 값을 사용해 세 개의 DIV 요소를 각각 왼쪽, 가운데, 오른쪽에 배치하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#root {
margin: 5%;
display: flex;
justify-content: space-between;
}
#one {
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>위 코드를 실행하면 첫 번째 요소는 왼쪽 끝에, 두 번째 요소는 가운데에, 세 번째 요소는 오른쪽 끝에 배치되며, 그 사이의 공간이 자동으로 균등하게 분배됩니다.
예제 2: space-evenly로 균등한 간격 만들기
다음 예제는 justify-content: space-evenly 값을 적용하여 여섯 개의 DIV 요소 사이와 양 끝의 여백을 모두 동일하게 배치하는 방법을 보여줍니다.
<!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>space-evenly 값은 항목들 사이의 간격뿐만 아니라 컨테이너 양 끝의 여백까지 모두 같은 크기로 유지해 주기 때문에, 균일한 레이아웃이 필요한 UI를 만들 때 특히 유용합니다.
정리
CSS Flexbox의 justify-content 속성 하나만으로도 float나 절대 위치 지정 없이 요소를 원하는 위치에 깔끔하게 정렬할 수 있습니다. 왼쪽·가운데·오른쪽 배치에는 space-between, 완전히 균등한 간격이 필요할 때는 space-evenly를 사용하는 것이 좋습니다.