HTML5/CSS Flexbox로 서로 다른 열 높이에 맞춰 목록 항목 정렬하기

웹 페이지에서 여러 개의 열(column)을 나란히 배치할 때, 각 열의 콘텐츠 길이가 달라 목록 항목의 세로 위치가 어긋나는 문제가 자주 발생합니다. 이럴 때 CSS Flexbox를 활용하면 열의 높이와 관계없이 목록 항목을 깔끔하게 정렬할 수 있습니다.

Flexbox를 활용한 열 정렬 원리

Flexbox는 요소를 유연하게(flexible) 배치할 수 있도록 도와주는 CSS 레이아웃 속성입니다. 래퍼(wrapper) 요소에 display: flex를 적용하면 하위 열들이 가로 방향으로 배치되면서, 각 열은 자신이 담고 있는 콘텐츠 양에 따라 유연하게 크기를 조절합니다.

.wrap {
    display: flex; /* 래퍼를 플렉스 컨테이너로 만들어 유연성 확보 */
}
.wrap .col {
    flex: 1 0 33%; /* 각 열이 균등하게 공간을 차지하도록 설정 */
}

위 코드에서 flex: 1 0 33%는 각 열이 사용 가능한 공간을 균등하게 나누어 가지되, 최소 기준 폭을 33%로 유지하라는 의미입니다. 덕분에 화면 크기가 변해도 열 배치가 안정적으로 유지됩니다.

목록 항목을 아래쪽 기준으로 정렬하기

열마다 콘텐츠 높이가 다를 때, 목록 항목을 각 열의 아래쪽(하단)에 맞춰 정렬하고 싶다면 margin-top: auto 속성을 활용하세요. 남는 여백이 자동으로 항목 위쪽으로 밀려나면서, 모든 열의 목록이 하단 기준선에 맞춰 정렬됩니다.

.col .content {
    margin-top: auto;
}

정리

• display: flex — 래퍼를 플렉스 컨테이너로 지정하여 열을 가로로 배치
• flex: 1 0 33% — 각 열이 콘텐츠에 따라 유연하게 크기를 조절
• margin-top: auto — 남은 공간을 위쪽 여백으로 밀어내 목록을 하단에 정렬

이처럼 Flexbox만으로도 별도의 JavaScript나 복잡한 계산 없이, 서로 다른 높이의 열에서도 목록 항목을 일관성 있게 정렬할 수 있습니다. 반응형 웹 디자인에서 특히 유용하게 활용되는 기법이니 꼭 익혀두시길 권장합니다.