align-content 속성으로 flex-wrap 동작 변경하기
CSS에서 align-content 속성을 사용하면 flex-wrap 속성의 동작을 수정할 수 있습니다. flex-wrap은 플렉스 항목이 컨테이너 안에서 여러 줄로 줄바꿈되는 방식을 결정하고, align-content는 그렇게 나뉜 여러 줄을 교차축(cross axis) 방향으로 어떻게 배치할지 제어합니다.
주요 align-content 속성값
- stretch – 기본값으로, 남은 공간을 균등하게 나누어 각 줄을 늘려 배치합니다.
- flex-start – 모든 줄을 컨테이너의 시작점에 밀착시켜 배치합니다.
- flex-end – 모든 줄을 컨테이너의 끝부분에 배치합니다.
- center – 모든 줄을 컨테이너 중앙에 정렬합니다.
- space-between – 첫 번째 줄은 시작점에, 마지막 줄은 끝에 배치하고 줄 사이에 균등한 간격을 둡니다.
- space-around – 각 줄의 앞뒤에 동일한 간격을 배분합니다.
예제 코드
아래 코드를 실행하면 flex-wrap과 align-content 속성이 함께 적용된 결과를 확인할 수 있습니다. 8개의 퀴즈 항목(Q1~Q8)이 여러 줄로 나뉘며, space-between 값에 따라 줄 사이 간격이 균등하게 벌어집니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
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>Q7</div>
<div>Q8</div>
</div>
</body>
</html>코드 동작 원리
위 예제에서 컨테이너의 높이는 150px, 너비는 600px이고 각 항목의 너비는 100px입니다. 따라서 한 줄에 약 5개의 항목이 들어가고, 나머지 항목들은 자동으로 다음 줄로 넘어갑니다(flex-wrap: wrap). 이때 align-content: space-between;이 적용되어 첫 번째 줄은 상단에, 마지막 줄은 하단에 배치되고 남은 세로 공간이 줄 사이에 고르게 분배됩니다.