CSS align-content 속성으로 플렉스 라인 정렬하기

플렉스 컨테이너 안에서 여러 줄(플렉스 라인)을 정렬하려면 align-content 속성을 사용합니다. 이 속성은 flex-wrap: wrap;이 설정되어 항목이 여러 줄로 나뉘는 경우에만 적용되며, 교차축(cross axis) 방향으로 줄들을 배치하는 방식을 결정합니다.

아래 예제 코드를 실행하면 align-content 속성이 실제로 어떻게 동작하는지 직접 확인할 수 있습니다.

예제

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: RED;
            align-content: space-between;
            height: 150px;
            width: 600px;
            flex-wrap: wrap;
         }
         .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>Q5</div>
         <div>Q6</div>
      </div>
   </body>
</html>

코드 설명

위 예제에서 컨테이너의 너비는 600px, 높이는 150px로 지정되어 있습니다. 각 항목의 너비가 100px이고 좌우 여백 5px씩 더해지기 때문에 한 줄에 최대 5개까지만 배치할 수 있어, 여섯 번째 항목(Q6)은 자동으로 다음 줄로 넘어갑니다.

여기서 align-content: space-between;이 적용되면 첫 번째 줄은 컨테이너의 시작점에, 마지막 줄은 끝점에 배치되고 남은 세로 공간은 두 줄 사이에 균등하게 분배됩니다.

align-content 속성의 주요 값

stretch(기본값): 줄이 남은 공간을 채우도록 늘어납니다.
flex-start: 모든 줄을 컨테이너의 시작점 쪽으로 모읍니다.
flex-end: 모든 줄을 컨테이너의 끝점 쪽으로 모읍니다.
center: 모든 줄을 컨테이너의 수직 중앙에 모읍니다.
space-between: 첫 줄은 시작점에, 마지막 줄은 끝점에 배치하고 나머지 공간을 줄 사이에 균등하게 분배합니다.
space-around: 각 줄의 앞뒤에 동일한 간격을 배분합니다.
space-evenly: 줄 사이와 양쪽 끝에 모두 동일한 간격을 배분합니다.

참고로, 플렉스 항목이 한 줄에 모두 들어가거나 flex-wrap: nowrap; 상태라면 align-content 속성은 아무런 효과가 없습니다. 여러 줄 정렬이 필요하다면 반드시 flex-wrap: wrap;과 함께 사용하세요.