플렉스(Flex) 레이아웃에서 항목들을 컨테이너의 하단에 정렬하려면 align-items 속성에 flex-end 값을 사용하면 됩니다.
align-items는 교차축(cross axis)을 따라 플렉스 항목을 배치하는 속성입니다. 기본값인 stretch는 항목을 세로로 늘려 채우지만, flex-end를 지정하면 모든 항목이 컨테이너의 끝부분, 즉 행(row) 방향 레이아웃에서는 아래쪽으로 이동하여 정렬됩니다.
예제 코드
다음 코드를 실행하면 6개의 플렉스 항목(SS1~SS6)이 파란색 컨테이너의 하단에 나란히 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 300px;
background-color: #5DADE2;
align-items: flex-end;
}
.mycontainer > div {
background-color: #F2F3F4;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>SOCIAL SECURITY Numbers</h1>
<div class = "mycontainer">
<div>SS1</div>
<div>SS2</div>
<div>SS3</div>
<div>SS4</div>
<div>SS5</div>
<div>SS6</div>
</div>
</body>
</html>
핵심 포인트 정리
- display: flex; — 해당 요소를 플렉스 컨테이너로 만들어 자식 요소에 플렉스 레이아웃을 적용합니다.
- height: 300px; — 컨테이너에 충분한 높이를 지정해야 정렬 위치 변화가 눈에 잘 띕니다.
- align-items: flex-end; — 항목들을 교차축의 끝(하단)으로 정렬합니다. 상단 정렬은
flex-start, 가운데 정렬은center값을 사용합니다.