CSS justify-content 속성이란?
justify-content 속성은 플렉스 컨테이너(flex container) 안에서 플렉스 아이템(flex item)들을 주축(main axis) 방향으로 정렬할 때 사용합니다. 아이템들을 왼쪽, 오른쪽, 가운데로 배치하거나 남은 공간을 균등하게 분배할 수 있어, 레이아웃을 구성할 때 매우 유용하게 활용됩니다.
아래 예제 코드를 직접 실행해 보면서 justify-content 속성이 실제로 어떻게 동작하는지 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
justify-content: center;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>위 코드에서는 .mycontainer 클래스에 display: flex;를 적용해 플렉스 컨테이너를 만들고, justify-content: center;를 지정하여 네 개의 자식 div(Q1~Q4)가 컨테이너의 가운데에 정렬되도록 했습니다.
justify-content의 주요 값
justify-content 속성에는 다양한 값을 지정할 수 있으며, 각 값에 따라 아이템이 배치되는 방식이 달라집니다.
- flex-start(기본값): 아이템들을 주축의 시작점 쪽으로 몰아서 정렬합니다.
- flex-end: 아이템들을 주축의 끝점 쪽으로 몰아서 정렬합니다.
- center: 아이템들을 주축의 중앙에 정렬합니다.
- space-between: 첫 번째 아이템은 시작점에, 마지막 아이템은 끝점에 배치하고 나머지 아이템들은 균등한 간격으로 배치합니다.
- space-around: 각 아이템의 좌우에 동일한 여백을 두고 배치합니다. 양쪽 끝의 여백은 아이템 사이 여백의 절반 크기입니다.
- space-evenly: 아이템 사이와 양쪽 끝을 포함해 모든 간격을 동일하게 배치합니다.
예제 코드의 justify-content: center; 부분을 위 값들로 바꿔가며 실행해 보면, 각 값이 화면에 어떤 차이를 만드는지 한눈에 파악할 수 있습니다.