CSS align-items 속성의 stretch 값 활용하기
CSS의 align-items 속성에 stretch 값을 지정하면, 플렉스 컨테이너 안의 플렉스 아이템들이 교차축(cross-axis) 방향으로 늘어나면서 컨테이너를 가득 채우게 됩니다.
stretch는 align-items 속성의 기본값입니다. 따라서 아이템에 고정된 높이(height)가 설정되어 있지 않다면, 각 아이템은 별도의 설정 없이도 컨테이너의 세로 길이만큼 자동으로 확장됩니다.
예제 코드
아래 예제를 실행하면 stretch 값이 실제로 어떻게 동작하는지 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: red;
align-items: stretch;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Queue</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>코드 설명
위 예제에서는 높이 200px의 빨간색 플렉스 컨테이너(.mycontainer)에 display: flex;와 함께 align-items: stretch;가 적용되어 있습니다.
그 결과, 네 개의 주황색 자식 요소(Q1~Q4)는 각각 폭 100px를 유지한 채 세로 방향으로는 컨테이너의 전체 높이인 200px까지 늘어나는 것을 확인할 수 있습니다. 만약 자식 요소에 명시적인 높이 값을 지정하면, 해당 높이가 우선 적용되어 더 이상 늘어나지 않습니다.