CSS의 align-content 속성에 flex-start 값을 지정하면, 플렉스 컨테이너 안의 여러 플렉스 라인(flex line)들이 교차축(cross axis) 방향으로 컨테이너의 시작 지점에 밀착되어 정렬됩니다. 이 속성은 flex-wrap: wrap과 함께 사용되어, 항목들이 여러 줄로 나뉘었을 때 각 줄이 컨테이너 내부에서 어떻게 배치될지를 결정합니다.
align-content: flex-start의 동작 방식
- 모든 플렉스 라인이 컨테이너의 시작 부분(일반적으로 상단)에 모여 배치됩니다.
- 라인들 사이에 추가적인 간격이 생기지 않으며, 남은 공간은 전부 컨테이너의 끝부분에 위치합니다.
- 플렉스 라인이 하나뿐인 경우에는 시각적으로 align-items와 비슷한 결과를 보입니다.
예제 코드
아래 예제를 실행하면 flex-start 값이 실제로 어떻게 적용되는지 확인할 수 있습니다:
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 300px;
background-color: blue;
align-content: flex-start;
flex-wrap: wrap;
}
.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>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
</div>
</body>
</html>코드 설명
위 코드에서는 높이 300px의 파란색 플렉스 컨테이너 안에 가로 100px짜리 주황색 항목 8개(Q1~Q8)가 배치됩니다. 항목들의 총 너비가 컨테이너 너비보다 크기 때문에 flex-wrap: wrap에 의해 항목들이 여러 줄로 나뉘며, align-content: flex-start 설정 덕분에 모든 플렉스 라인이 컨테이너의 시작 부분(상단)에 붙어서 정렬됩니다. 만약 이 값을 space-between이나 center 등으로 바꾸면 라인들이 배치되는 방식이 달라지는 것을 직접 비교해 볼 수 있습니다.