플렉스 컨테이너 안의 아이템들을 하단(아래쪽)으로 정렬하고 싶다면, align-items 속성에 flex-end 값을 지정하면 됩니다.
align-items는 교차축(cross axis) 방향으로 플렉스 아이템을 배치하는 속성입니다. 기본값인 stretch는 아이템을 컨테이너 높이만큼 늘려 채우지만, flex-end를 사용하면 아이템들이 컨테이너의 맨 아래쪽에 붙어서 정렬됩니다.
align-items: flex-end 예제
아래 코드를 실행하면 빨간색 배경의 컨테이너 안에서 주황색 박스들이 하단에 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 300px;
background-color: red;
align-items: flex-end;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>
코드 설명
- .mycontainer:
display: flex로 플렉스 컨테이너를 만들고, 높이를 300px로 지정한 뒤align-items: flex-end를 적용해 자식 요소들을 하단에 정렬합니다. - .mycontainer > div: 각 아이템(Q1~Q4)은 너비 100px, 주황색 배경, 가운데 정렬된 텍스트 스타일을 가집니다.
참고: align-items의 주요 값
stretch(기본값): 아이템을 컨테이너 높이만큼 늘림flex-start: 아이템을 상단(시작점)에 정렬flex-end: 아이템을 하단(끝점)에 정렬center: 아이템을 세로 방향 중앙에 정렬baseline: 아이템의 텍스트 기준선(baseline)에 맞춰 정렬