CSS flex-direction 속성과 column 값
CSS의 flex-direction 속성에 column 값을 지정하면 플렉스 컨테이너 안의 아이템들이 세로(위에서 아래로) 방향으로 배치됩니다. 기본값인 row가 가로 배치를 담당한다면, column은 주축(main axis)을 수직 방향으로 변경하여 아이템을 위아래로 나열합니다.
아래 예제 코드를 실행하면 Q1부터 Q6까지의 항목이 세로로 정렬되는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
flex-direction: column;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
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>Q5</div>
<div>Q6</div>
</div>
</body>
</html>코드 설명
- display: flex; — 해당 요소를 플렉스 컨테이너로 만들어 자식 요소들을 유연하게 배치할 수 있도록 합니다.
- flex-direction: column; — 플렉스 아이템의 배치 방향을 세로로 설정합니다.
- background-color: orange; — 컨테이너에 주황색 배경을 적용해 아이템 배치를 시각적으로 확인하기 쉽게 합니다.
flex-direction 속성의 주요 값
row(기본값): 아이템을 가로 방향으로 배치합니다.row-reverse: 가로 방향이지만 오른쪽에서 왼쪽으로 배치합니다.column: 아이템을 세로 방향으로 배치합니다.column-reverse: 세로 방향이지만 아래에서 위로 배치합니다.
이처럼 flex-direction 속성은 레이아웃 방향을 손쉽게 제어할 수 있는 핵심 도구입니다. 특히 모바일 환경에서 세로 목록 UI를 구성하거나, 반응형 디자인에서 배치 방향을 전환할 때 매우 유용하게 활용됩니다.