CSS justify-content 속성으로 플렉스 항목 수평 정렬하기

플렉스(Flex) 레이아웃에서 항목들이 기본 축(main-axis) 방향으로 사용 가능한 공간을 전부 차지하지 않을 때가 있습니다. 이럴 때 justify-content 속성을 사용하면 남은 공간을 활용해 플렉스 항목들을 수평 방향으로 원하는 위치에 정렬할 수 있습니다.

justify-content 속성의 주요 값

flex-start: 기본값으로, 항목들을 컨테이너의 시작 지점에 정렬합니다.
flex-end: 항목들을 컨테이너의 끝 지점에 정렬합니다.
center: 항목들을 컨테이너의 가운데에 정렬합니다.
space-between: 첫 번째 항목은 시작점에, 마지막 항목은 끝점에 배치하고 나머지 항목들 사이에 균등한 간격을 만듭니다.
space-around: 각 항목의 좌우에 균등한 여백을 두고 배치합니다.

예제

아래 코드를 실행하면 justify-content: center; 설정에 따라 네 개의 퀴즈 항목(Q1~Q4)이 파란색 컨테이너 안에서 가운데로 정렬되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: blue;
            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;를 추가하여 자식 요소들이 수평 중앙에 배치되도록 했습니다. 값을 flex-start, flex-end, space-between 등으로 바꿔가며 정렬 결과의 변화를 직접 비교해 보면 속성의 동작 방식을 더 쉽게 이해할 수 있습니다.