CSS Flex로 요소를 컨테이너 맨 아래에 배치하는 방법
웹 페이지 레이아웃을 구성하다 보면 특정 요소를 부모 컨테이너의 맨 아래(하단)에 배치해야 하는 경우가 자주 발생합니다. 이때 CSS Flexbox를 활용하면 position 속성이나 복잡한 수치 계산 없이도 아주 간단하게 해결할 수 있습니다.
핵심 원리는 margin-top: auto입니다. 세로 방향(flex-direction: column) 플렉스 컨테이너 안에서 요소에 margin-top: auto를 지정하면, 해당 요소 위쪽의 남은 공간 전체가 여백으로 채워지면서 요소가 자동으로 컨테이너의 맨 아래로 밀려납니다.
문법(Syntax)
CSS flex 속성의 기본 문법은 다음과 같습니다.
Selector {
flex: /*value*/
}예제 1: 텍스트 요소를 하단에 배치하기
다음 예제는 네 개의 div 요소 중 마지막 요소(#d4)에만 margin-top: auto를 적용해 컨테이너의 맨 아래로 내린 사례입니다. 나머지 요소들은 상단부터 순서대로 배치되며, 빈 공간은 모두 #d4 위쪽의 여백으로 처리됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
flex-direction: column;
box-shadow: inset 0 0 6px aqua;
margin: 2%;
width: 30%;
height: 15%;
}
#d2, #d3 {
margin-left: 15%;
margin-top: 5%;
box-shadow: inset 0 0 6px green!important;
}
#d4 {
box-shadow: inset 0 0 6px red!important;
margin-top: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="d1">Random text here..</div>
<div id="d2">Hello!!</div>
<div id="d3">Watch this</div>
<div id="d4">Example</div>
</div>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: 이미지 요소를 하단에 배치하기
이번에는 텍스트 대신 이미지를 담은 요소를 하단에 배치하는 예제입니다. 마찬가지로 마지막 이미지 요소(#d4)에 margin-top: auto를 적용하여 컨테이너 하단으로 밀어냈으며, margin-left: 50%를 추가해 위치를 조절했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
flex-direction: column;
box-shadow: inset 0 0 6px red;
margin: 2%;
width: 30%;
}
#d2, #d3 {
margin-left: 15%;
border-radius: 50%;
padding: 5%;
box-shadow: inset 0 0 6px green!important;
}
#d4 {
margin-left: 50%;
margin-top: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="d1"><img src="https://images.pexels.com/photos/5512653/pexels-photo-5512653.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"><img src="https://images.pexels.com/photos/6032874/pexels-photo-6032874.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /></div>
</div>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
마무리 정리
CSS Flexbox에서 margin-top: auto는 세로(column) 레이아웃에서 요소를 하단으로 밀어내는 가장 간단하고 효율적인 기법입니다. 같은 원리로 가로(row) 레이아웃에서는 margin-left: auto 또는 margin-right: auto를 사용하면 요소를 좌우 끝으로 손쉽게 배치할 수 있으니 함께 기억해 두면 유용합니다.