플렉스(flex) 컨테이너 안의 항목들이 사용 가능한 공간을 모두 차지하지 않을 때, JavaScript의 alignContent 속성을 사용하면 항목들 사이의 정렬 방식을 손쉽게 설정할 수 있습니다.
alignContent 속성이란?
alignContent 속성은 플렉스 컨테이너 내에서 여러 줄로 배치된 항목들의 교차축(cross-axis) 정렬을 제어합니다. 이 속성은 flex-wrap: wrap;처럼 항목이 여러 줄로 나뉘는 경우에만 효과가 있으며, 대표적인 값은 다음과 같습니다.
- stretch – 기본값으로, 남은 공간만큼 항목들을 늘려 맞춥니다.
- center – 항목들을 컨테이너 중앙에 배치합니다.
- flex-start – 항목들을 컨테이너의 시작 지점에 배치합니다.
- flex-end – 항목들을 컨테이너의 끝 지점에 배치합니다.
- space-between – 첫 번째 줄은 시작점에, 마지막 줄은 끝점에 배치하고 줄 사이에 균등한 간격을 둡니다.
- space-around – 각 줄의 앞뒤에 동일한 간격을 배분합니다.
예제 코드
아래 코드를 실행하고 버튼을 클릭하면 alignContent 속성이 space-around에서 space-between으로 변경되면서 항목 정렬이 달라지는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 240px;
height: 150px;
flex-flow: row wrap;
align-content: space-around;
display: flex;
}
#box div {
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<div id="box">
<div style="background-color:orange;" id="myID1">DIV1</div>
<div style="background-color:blue;" id="myID2">DIV2</div>
<div style="background-color:yellow;" id="myID3">DIV3</div>
</div>
<button onclick="display()">Set</button>
<script>
function display() {
document.getElementById("box").style.alignContent = "space-between";
}
</script>
</body>
</html>
코드 설명
버튼을 클릭하면 display() 함수가 호출되어 #box 요소의 alignContent 스타일이 space-between으로 변경됩니다. 그 결과 여러 줄로 배치된 DIV 항목들 사이의 간격이 균등하게 조정되며, 첫 번째 줄은 컨테이너 상단에, 마지막 줄은 하단에 붙어 배치됩니다. 이처럼 alignContent 속성을 활용하면 복잡한 계산 없이도 플렉스 레이아웃의 세로 정렬을 유연하게 제어할 수 있습니다.