align-content: space-between 속성이란?
CSS의 align-content 속성에 space-between 값을 사용하면 플렉스 컨테이너 안의 여러 플렉스 라인(flex lines) 사이에 균등한 간격을 자동으로 배치할 수 있습니다. 이때 첫 번째 라인은 컨테이너의 시작 지점에, 마지막 라인은 끝 지점에 붙고, 나머지 라인들은 그 사이에 동일한 간격으로 정렬됩니다.
이 값은 flex-wrap: wrap과 함께 사용할 때 효과적입니다. 플렉스 항목이 한 줄에 모두 들어가지 못하고 여러 줄로 나뉘어 배치되는 경우에만 라인 사이의 간격이 조정되기 때문입니다.
예제
아래 코드를 직접 실행하면 space-between 값이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: #5D6D7E;
align-content: space-between;
flex-wrap: wrap;
}
.mycontainer > div {
background-color: #EBF5FB;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Queue</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>코드 설명
위 예제에서 .mycontainer 클래스는 display: flex와 flex-wrap: wrap을 설정해 여덟 개의 항목(Q1~Q8)이 여러 줄로 배치되도록 합니다. 컨테이너의 높이는 200px로 고정되어 있으며, align-content: space-between 덕분에 항목들이 감싸여 여러 라인을 형성할 때 남은 세로 공간이 라인 사이에 균등하게 분배됩니다.
결과적으로 첫 번째 라인은 컨테이너 상단에, 마지막 라인은 하단에 위치하고 중간 라인들은 그 사이에서 일정한 간격을 유지하게 되어, 시각적으로 깔끔하고 균형 잡힌 레이아웃을 완성할 수 있습니다.