CSS의 align-items 속성에 flex-start 값을 지정하면 플렉스 컨테이너 안의 아이템들을 교차축(cross axis)의 시작점, 즉 가로 방향 플렉스에서는 컨테이너의 맨 위(상단)로 정렬할 수 있습니다.
flex-start 값의 특징
align-items는 플렉스 아이템을 교차축 방향으로 배치하는 속성입니다. 기본값인 stretch는 아이템을 컨테이너 높이만큼 늘리지만, flex-start를 사용하면 각 아이템이 자신의 원래 크기를 유지한 채 상단에 붙어 정렬됩니다.
예제
아래 코드를 실행하면 빨간색 배경의 플렉스 컨테이너 안에서 주황색 아이템들이 상단에 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 300px;
background-color: red;
align-items: flex-start;
}
.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-start를 적용합니다. - .mycontainer > div: 컨테이너의 직계 자식 요소들(Q1~Q4)에 배경색, 너비, 여백 등 스타일을 지정합니다.
결과적으로 Q1부터 Q4까지의 아이템들은 300px 높이의 컨테이너 안에서 늘어나지 않고, 각각 60px 높이를 유지하면서 맨 윗줄에 나란히 정렬됩니다.
참고: align-items의 다른 값
stretch(기본값): 아이템을 교차축 방향으로 늘려 채웁니다.center: 교차축 중앙에 정렬합니다.flex-end: 교차축 끝(하단)에 정렬합니다.baseline: 텍스트 기준선을 기준으로 정렬합니다.